website refactor

This commit is contained in:
2026-01-19 02:14:53 +01:00
parent 489c5f7858
commit a8731e6937
70 changed files with 2908 additions and 2423 deletions

View File

@@ -1,19 +1,16 @@
'use client';
import { EmptyState } from '@/ui/EmptyState';
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 { Box } from '@/ui/Box';
import { Container } from '@/ui/Container';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Users } from 'lucide-react';
import { TemplateProps } from '@/lib/contracts/components/ComponentContracts';
interface TeamsTemplateProps {
viewData: TeamsViewData;
interface TeamsTemplateProps extends TemplateProps<TeamsViewData> {
onTeamClick?: (teamId: string) => void;
onViewFullLeaderboard: () => void;
onCreateTeam: () => void;
@@ -23,58 +20,44 @@ export function TeamsTemplate({ viewData, onTeamClick, onViewFullLeaderboard, on
const { teams } = viewData;
return (
<Box as="main" bg="base-black" minH="screen">
<Container size="lg" py={12}>
<Stack gap={10}>
<TeamsDirectoryHeader onCreateTeam={onCreateTeam} />
<TeamsDirectory>
<TeamsDirectoryHeader onCreateTeam={onCreateTeam} />
<Box>
<Stack direction="row" align="center" gap={2} mb={6}>
<Box w="2" h="2" bg="primary-accent" />
<Text size="xs" weight="bold" color="text-gray-400" uppercase>Active Rosters</Text>
</Stack>
{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>
) : (
<EmptyState
icon={Users}
title="No teams yet"
description="Get started by creating your first racing team"
action={{
label: 'Create Team',
onClick: onCreateTeam,
variant: 'primary'
}}
<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)}
/>
)}
</Box>
))}
</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>
{/* Team Leaderboard Preview */}
<Box pt={10} borderTop borderColor="outline-steel" borderOpacity={0.3}>
<Stack direction="row" align="center" gap={2} mb={6}>
<Box w="2" h="2" bg="telemetry-aqua" />
<Text size="xs" weight="bold" color="text-gray-400" uppercase>Global Standings</Text>
</Stack>
<TeamLeaderboardPreview
topTeams={[]}
onTeamClick={(id) => onTeamClick?.(id)}
onViewFullLeaderboard={onViewFullLeaderboard}
/>
</Box>
</Stack>
</Container>
</Box>
<TeamsDirectorySection title="Global Standings" accentColor="telemetry-aqua">
<TeamLeaderboardPreview
topTeams={[]}
onTeamClick={(id) => onTeamClick?.(id)}
onViewFullLeaderboard={onViewFullLeaderboard}
/>
</TeamsDirectorySection>
</TeamsDirectory>
);
}