Files
gridpilot.gg/apps/website/templates/TeamsTemplate.tsx
2026-01-19 02:14:53 +01:00

64 lines
2.2 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/SharedEmptyState';
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}
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>
);
}