website refactor

This commit is contained in:
2026-01-21 13:49:59 +01:00
parent 69c9305d59
commit ac37871bef
11 changed files with 280 additions and 338 deletions

View File

@@ -1,12 +1,15 @@
'use client';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { LeaderboardTableShell } from '@/ui/LeaderboardTableShell';
import { LeaderboardList } from '@/ui/LeaderboardList';
import { RankingRow } from '@/components/leaderboards/RankingRow';
import { useRouter } from 'next/navigation';
import { routes } from '@/lib/routing/RouteConfig';
interface StandingEntry {
position: number;
driverName: string;
driverId?: string; // Added to support navigation
teamName?: string;
points: number;
wins: number;
@@ -21,62 +24,27 @@ interface LeagueStandingsTableProps {
}
export function LeagueStandingsTable({ standings }: LeagueStandingsTableProps) {
const router = useRouter();
return (
<Stack as="section" overflow="hidden" border borderColor="zinc-800" bg="zinc-900/50">
<Table className="border-none rounded-none">
<TableHead>
<TableRow className="bg-zinc-900/80 border-zinc-800">
<TableHeader className="w-12 px-4 py-3">
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Pos</Text>
</TableHeader>
<TableHeader className="px-4 py-3">
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Driver</Text>
</TableHeader>
<TableHeader className="hidden md:table-cell px-4 py-3">
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Team</Text>
</TableHeader>
<TableHeader className="text-center px-4 py-3">
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Races</Text>
</TableHeader>
<TableHeader className="text-center px-4 py-3">
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Avg</Text>
</TableHeader>
<TableHeader className="text-right px-4 py-3">
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Points</Text>
</TableHeader>
<TableHeader className="text-right px-4 py-3">
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Gap</Text>
</TableHeader>
</TableRow>
</TableHead>
<TableBody className="divide-zinc-800">
{standings.map((entry) => (
<TableRow key={entry.driverName} className="border-zinc-800 hover:bg-zinc-800/50">
<TableCell className="px-4 py-3">
<Text size="sm" color="text-zinc-400" font="mono">{entry.position}</Text>
</TableCell>
<TableCell className="px-4 py-3">
<Text size="sm" weight="medium" color="text-zinc-200">{entry.driverName}</Text>
</TableCell>
<TableCell className="hidden md:table-cell px-4 py-3">
<Text size="sm" color="text-zinc-500">{entry.teamName || '—'}</Text>
</TableCell>
<TableCell className="text-center px-4 py-3">
<Text size="sm" color="text-zinc-400">{entry.races}</Text>
</TableCell>
<TableCell className="text-center px-4 py-3">
<Text size="sm" color="text-zinc-400">{entry.avgFinish?.toFixed(1) || '—'}</Text>
</TableCell>
<TableCell className="text-right px-4 py-3">
<Text size="sm" weight="bold" color="text-white">{entry.points}</Text>
</TableCell>
<TableCell className="text-right px-4 py-3">
<Text size="sm" color="text-zinc-500" font="mono">{entry.gap}</Text>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Stack>
<LeaderboardTableShell>
<LeaderboardList>
{standings.map((entry) => (
<RankingRow
key={entry.driverId || entry.driverName}
id={entry.driverId || ''}
rank={entry.position}
name={entry.driverName}
avatarUrl="" // Not provided in StandingEntry
nationality="INT"
skillLevel="pro"
racesCompleted={entry.races}
rating={0}
wins={entry.wins}
onClick={entry.driverId ? () => router.push(routes.driver.detail(entry.driverId!)) : undefined}
/>
))}
</LeaderboardList>
</LeaderboardTableShell>
);
}