81 lines
3.5 KiB
TypeScript
81 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
|
|
import { Text } from '@/ui/Text';
|
|
import { Stack } from '@/ui/Stack';
|
|
|
|
interface StandingEntry {
|
|
position: number;
|
|
driverName: string;
|
|
teamName?: string;
|
|
points: number;
|
|
wins: number;
|
|
podiums: number;
|
|
gap: string;
|
|
}
|
|
|
|
interface LeagueStandingsTableProps {
|
|
standings: StandingEntry[];
|
|
}
|
|
|
|
export function LeagueStandingsTable({ standings }: LeagueStandingsTableProps) {
|
|
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">Wins</Text>
|
|
</TableHeader>
|
|
<TableHeader className="text-center px-4 py-3">
|
|
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Podiums</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.wins}</Text>
|
|
</TableCell>
|
|
<TableCell className="text-center px-4 py-3">
|
|
<Text size="sm" color="text-zinc-400">{entry.podiums}</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>
|
|
);
|
|
}
|