67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import { TeamCard } from '@/components/teams/TeamCardWrapper';
|
|
import { TeamGrid } from '@/components/teams/TeamGrid';
|
|
import { TeamLeaderboardPreview } from '@/components/teams/TeamLeaderboardPreviewWrapper';
|
|
import { TeamsDirectoryHeader } from '@/components/teams/TeamsDirectoryHeader';
|
|
import { TeamsDirectory, TeamsDirectorySection } from '@/components/teams/TeamsDirectory';
|
|
import { SharedEmptyState } from '@/components/shared/UIComponents';
|
|
import type { TeamsViewData } from '@/lib/view-data/TeamsViewData';
|
|
import { Users } from 'lucide-react';
|
|
import { TemplateProps } from '@/lib/contracts/components/ComponentContracts';
|
|
|
|
interface TeamsTemplateProps extends TemplateProps<TeamsViewData> {
|
|
onTeamClick?: (teamId: string) => void;
|
|
onViewFullLeaderboard: () => void;
|
|
onCreateTeam: () => void;
|
|
}
|
|
|
|
export function TeamsTemplate({ viewData, onTeamClick, onViewFullLeaderboard, onCreateTeam }: TeamsTemplateProps) {
|
|
const { teams } = viewData;
|
|
|
|
return (
|
|
<TeamsDirectory>
|
|
<TeamsDirectoryHeader onCreateTeam={onCreateTeam} />
|
|
|
|
<TeamsDirectorySection title="Active Rosters" accentColor="primary-accent">
|
|
{teams.length > 0 ? (
|
|
<TeamGrid>
|
|
{teams.map((team) => (
|
|
<TeamCard
|
|
key={team.teamId}
|
|
id={team.teamId}
|
|
name={team.teamName}
|
|
memberCount={team.memberCount}
|
|
logo={team.logoUrl}
|
|
ratingLabel={team.ratingLabel}
|
|
winsLabel={team.winsLabel}
|
|
racesLabel={team.racesLabel}
|
|
onClick={() => onTeamClick?.(team.teamId)}
|
|
/>
|
|
))}
|
|
</TeamGrid>
|
|
) : (
|
|
<SharedEmptyState
|
|
icon={Users}
|
|
title="No teams yet"
|
|
description="Get started by creating your first racing team"
|
|
action={{
|
|
label: 'Create Team',
|
|
onClick: onCreateTeam,
|
|
variant: 'primary'
|
|
}}
|
|
/>
|
|
)}
|
|
</TeamsDirectorySection>
|
|
|
|
<TeamsDirectorySection title="Global Standings" accentColor="telemetry-aqua">
|
|
<TeamLeaderboardPreview
|
|
topTeams={[]}
|
|
onTeamClick={(id) => onTeamClick?.(id)}
|
|
onViewFullLeaderboard={onViewFullLeaderboard}
|
|
/>
|
|
</TeamsDirectorySection>
|
|
</TeamsDirectory>
|
|
);
|
|
}
|