46 lines
1.8 KiB
TypeScript
46 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { TrendingUp } from 'lucide-react';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Text } from '@/ui/Text';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
|
|
interface DriverTableProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function DriverTable({ children }: DriverTableProps) {
|
|
return (
|
|
<Stack gap={4}>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Box display="flex" h="10" w="10" alignItems="center" justifyContent="center" rounded="xl" bg="bg-primary-blue/10" border borderColor="border-primary-blue/20">
|
|
<TrendingUp size={20} color="#198CFF" />
|
|
</Box>
|
|
<Box>
|
|
<Heading level={2}>Driver Rankings</Heading>
|
|
<Text size="xs" color="text-gray-500">Top performers by skill rating</Text>
|
|
</Box>
|
|
</Stack>
|
|
|
|
<Box overflow="hidden" rounded="xl" border borderColor="border-charcoal-outline" bg="bg-deep-charcoal/50">
|
|
<Box as="table" w="full" textAlign="left">
|
|
<Box as="thead">
|
|
<Box as="tr" borderBottom borderColor="border-charcoal-outline" bg="bg-deep-charcoal/80">
|
|
<Box as="th" px={6} py={4} fontSize="xs" color="text-gray-500" textAlign="center" width="60px">#</Box>
|
|
<Box as="th" px={6} py={4} fontSize="xs" color="text-gray-500">Driver</Box>
|
|
<Box as="th" px={6} py={4} fontSize="xs" color="text-gray-500" width="150px">Nationality</Box>
|
|
<Box as="th" px={6} py={4} fontSize="xs" color="text-gray-500" textAlign="right" width="100px">Rating</Box>
|
|
<Box as="th" px={6} py={4} fontSize="xs" color="text-gray-500" textAlign="right" width="80px">Wins</Box>
|
|
</Box>
|
|
</Box>
|
|
<Box as="tbody">
|
|
{children}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
}
|