81 lines
3.4 KiB
TypeScript
81 lines
3.4 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
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 (
|
|
<Box as="section" overflow="hidden" border borderColor="zinc-800" bg="zinc-900/50">
|
|
<Box as="table" w="full" textAlign="left">
|
|
<Box as="thead">
|
|
<Box as="tr" borderBottom borderColor="zinc-800" bg="zinc-900/80">
|
|
<Box as="th" px={4} py={3} w="12">
|
|
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Pos</Text>
|
|
</Box>
|
|
<Box as="th" px={4} py={3}>
|
|
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Driver</Text>
|
|
</Box>
|
|
<Box as="th" px={4} py={3} display={{ base: 'none', md: 'table-cell' }}>
|
|
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Team</Text>
|
|
</Box>
|
|
<Box as="th" px={4} py={3} textAlign="center">
|
|
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Wins</Text>
|
|
</Box>
|
|
<Box as="th" px={4} py={3} textAlign="center">
|
|
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Podiums</Text>
|
|
</Box>
|
|
<Box as="th" px={4} py={3} textAlign="right">
|
|
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Points</Text>
|
|
</Box>
|
|
<Box as="th" px={4} py={3} textAlign="right">
|
|
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Gap</Text>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
<Box as="tbody">
|
|
{standings.map((entry) => (
|
|
<Box as="tr" key={entry.driverName} borderBottom borderColor="zinc-800" hoverBg="zinc-800/50" transition>
|
|
<Box as="td" px={4} py={3}>
|
|
<Text size="sm" color="text-zinc-400" font="mono">{entry.position}</Text>
|
|
</Box>
|
|
<Box as="td" px={4} py={3}>
|
|
<Text size="sm" weight="medium" color="text-zinc-200">{entry.driverName}</Text>
|
|
</Box>
|
|
<Box as="td" px={4} py={3} display={{ base: 'none', md: 'table-cell' }}>
|
|
<Text size="sm" color="text-zinc-500">{entry.teamName || '—'}</Text>
|
|
</Box>
|
|
<Box as="td" px={4} py={3} textAlign="center">
|
|
<Text size="sm" color="text-zinc-400">{entry.wins}</Text>
|
|
</Box>
|
|
<Box as="td" px={4} py={3} textAlign="center">
|
|
<Text size="sm" color="text-zinc-400">{entry.podiums}</Text>
|
|
</Box>
|
|
<Box as="td" px={4} py={3} textAlign="right">
|
|
<Text size="sm" weight="bold" color="text-white">{entry.points}</Text>
|
|
</Box>
|
|
<Box as="td" px={4} py={3} textAlign="right">
|
|
<Text size="sm" color="text-zinc-500" font="mono">{entry.gap}</Text>
|
|
</Box>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|