website refactor

apps/website/components/drivers/DriverTable.tsx

@@ -0,0 +1,45 @@
+'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>
+  );
+}