118 lines
4.1 KiB
TypeScript
118 lines
4.1 KiB
TypeScript
|
|
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Image } from '@/ui/Image';
|
|
import { Stack } from '@/ui/primitives/Stack';
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
|
|
import { Text } from '@/ui/Text';
|
|
import { Medal } from 'lucide-react';
|
|
|
|
interface Driver {
|
|
id: string;
|
|
name: string;
|
|
avatarUrl: string;
|
|
rank: number;
|
|
nationality: string;
|
|
skillLevel: string;
|
|
racesCompleted: number;
|
|
rating: number;
|
|
wins: number;
|
|
medalBg?: string;
|
|
medalColor?: string;
|
|
}
|
|
|
|
interface RankingsTableProps {
|
|
drivers: Driver[];
|
|
onDriverClick?: (id: string) => void;
|
|
}
|
|
|
|
export function RankingsTable({ drivers, onDriverClick }: RankingsTableProps) {
|
|
if (drivers.length === 0) {
|
|
return (
|
|
<Stack py={16} align="center" bg="bg-iron-gray/30" border borderColor="border-charcoal-outline" rounded="xl">
|
|
<Text size="4xl" block mb={4}>🔍</Text>
|
|
<Text color="text-gray-400" block mb={2}>No drivers found</Text>
|
|
<Text size="sm" color="text-gray-500">There are no drivers in the system yet</Text>
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Stack rounded="xl" bg="bg-iron-gray/30" border borderColor="border-charcoal-outline" overflow="hidden" gap={0}>
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableHeader className="text-center w-16">Rank</TableHeader>
|
|
<TableHeader>Driver</TableHeader>
|
|
<TableHeader className="text-center">Races</TableHeader>
|
|
<TableHeader className="text-center">Rating</TableHeader>
|
|
<TableHeader className="text-center">Wins</TableHeader>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{drivers.map((driver) => (
|
|
<TableRow
|
|
key={driver.id}
|
|
clickable
|
|
onClick={() => onDriverClick?.(driver.id)}
|
|
>
|
|
<TableCell className="text-center">
|
|
<Stack
|
|
direction="row"
|
|
h="9"
|
|
w="9"
|
|
align="center"
|
|
justify="center"
|
|
rounded="full"
|
|
border
|
|
borderColor="border-charcoal-outline"
|
|
bg={driver.medalBg}
|
|
fontSize="sm"
|
|
fontWeight="bold"
|
|
>
|
|
{driver.rank <= 3 ? <Icon icon={Medal} size={4} color={driver.medalColor} /> : (
|
|
<Text color={driver.medalColor}>{driver.rank}</Text>
|
|
)}
|
|
</Stack>
|
|
</TableCell>
|
|
|
|
<TableCell>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Stack position="relative" w="10" h="10" rounded="full" overflow="hidden" border borderColor="border-charcoal-outline" gap={0}>
|
|
<Image src={driver.avatarUrl} alt={driver.name} width={40} height={40} objectFit="cover" fullWidth fullHeight />
|
|
</Stack>
|
|
<Stack minWidth="0" gap={0}>
|
|
<Text weight="semibold" color="text-white" block truncate>
|
|
{driver.name}
|
|
</Text>
|
|
<Stack direction="row" align="center" gap={2} mt={1}>
|
|
<Text size="xs" color="text-gray-500">{driver.nationality}</Text>
|
|
<Text size="xs" color="text-gray-500">{driver.skillLevel}</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
</TableCell>
|
|
|
|
<TableCell className="text-center">
|
|
<Text color="text-gray-400">{driver.racesCompleted}</Text>
|
|
</TableCell>
|
|
|
|
<TableCell className="text-center">
|
|
<Text font="mono" weight="semibold" color="text-white">
|
|
{driver.rating.toString()}
|
|
</Text>
|
|
</TableCell>
|
|
|
|
<TableCell className="text-center">
|
|
<Text font="mono" weight="semibold" color="text-performance-green">
|
|
{driver.wins}
|
|
</Text>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</Stack>
|
|
);
|
|
}
|