website refactor

apps/website/components/drivers/DriverTableRow.tsx

@@ -3,7 +3,9 @@
 import { RatingBadge } from '@/components/drivers/RatingBadge';
 import { Image } from '@/ui/Image';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
+import { TableRow, TableCell } from '@/ui/Table';
+import { Avatar } from '@/ui/Avatar';
 
 interface DriverTableRowProps {
   rank: number;
@@ -24,61 +26,45 @@ export function DriverTableRow({
   wins,
   onClick,
 }: DriverTableRowProps) {
-  const defaultAvatar = 'https://cdn.gridpilot.com/avatars/default.png';
-
   return (
-    <Stack 
-      as="tr" 
-      onClick={onClick}
-      cursor="pointer"
-      transition
-      hoverBg="bg-primary-blue/5"
-      group
-      borderBottom
-      borderColor="border-charcoal-outline/50"
-    >
-      <Stack as="td" px={6} py={4} textAlign="center">
+    <TableRow onClick={onClick} clickable>
+      <TableCell textAlign="center">
         <Text 
           size="sm" 
           weight="bold" 
           font="mono" 
-          color={rank <= 3 ? 'text-warning-amber' : 'text-gray-500'}
+          variant={rank <= 3 ? 'warning' : 'low'}
         >
           {rank}
         </Text>
-      </Stack>
-      <Stack as="td" px={6} py={4}>
+      </TableCell>
+      <TableCell>
         <Stack direction="row" align="center" gap={3}>
-          <Stack position="relative" h="8" w="8" overflow="hidden" rounded="full" border borderColor="border-charcoal-outline" bg="bg-deep-charcoal">
-            <Image 
-              src={avatarUrl || defaultAvatar} 
-              alt={name} 
-              fill 
-              objectFit="cover"
-            />
-          </Stack>
+          <Avatar 
+            src={avatarUrl || undefined} 
+            alt={name} 
+            size="sm"
+          />
           <Text 
             size="sm" 
             weight="semibold" 
-            color="text-white" 
-            groupHoverTextColor="text-primary-blue" 
-            transition
+            variant="high"
           >
             {name}
           </Text>
         </Stack>
-      </Stack>
-      <Stack as="td" px={6} py={4}>
-        <Text size="xs" color="text-gray-400">{nationality}</Text>
-      </Stack>
-      <Stack as="td" px={6} py={4} textAlign="right">
+      </TableCell>
+      <TableCell>
+        <Text size="xs" variant="low">{nationality}</Text>
+      </TableCell>
+      <TableCell textAlign="right">
         <RatingBadge rating={rating} size="sm" />
-      </Stack>
-      <Stack as="td" px={6} py={4} textAlign="right">
-        <Text size="sm" weight="semibold" font="mono" color="text-performance-green">
+      </TableCell>
+      <TableCell textAlign="right">
+        <Text size="sm" weight="semibold" font="mono" variant="success">
           {wins}
         </Text>
-      </Stack>
-    </Stack>
+      </TableCell>
+    </TableRow>
   );
 }