website refactor

apps/website/components/drivers/DriverTableRow.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import React from 'react';
+import { RatingBadge } from '@/ui/RatingBadge';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Image } from '@/ui/Image';
+
+interface DriverTableRowProps {
+  rank: number;
+  name: string;
+  avatarUrl?: string | null;
+  nationality: string;
+  rating: number;
+  wins: number;
+  onClick: () => void;
+}
+
+export function DriverTableRow({
+  rank,
+  name,
+  avatarUrl,
+  nationality,
+  rating,
+  wins,
+  onClick,
+}: DriverTableRowProps) {
+  const defaultAvatar = 'https://cdn.gridpilot.com/avatars/default.png';
+
+  return (
+    <Box 
+      as="tr" 
+      onClick={onClick}
+      cursor="pointer"
+      transition
+      hoverBg="bg-primary-blue/5"
+      group
+      borderBottom
+      borderColor="border-charcoal-outline/50"
+    >
+      <Box as="td" px={6} py={4} textAlign="center">
+        <Text 
+          size="sm" 
+          weight="bold" 
+          font="mono" 
+          color={rank <= 3 ? 'text-warning-amber' : 'text-gray-500'}
+        >
+          {rank}
+        </Text>
+      </Box>
+      <Box as="td" px={6} py={4}>
+        <Stack direction="row" align="center" gap={3}>
+          <Box 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"
+            />
+          </Box>
+          <Text 
+            size="sm" 
+            weight="semibold" 
+            color="text-white" 
+            groupHoverTextColor="text-primary-blue" 
+            transition
+          >
+            {name}
+          </Text>
+        </Stack>
+      </Box>
+      <Box as="td" px={6} py={4}>
+        <Text size="xs" color="text-gray-400">{nationality}</Text>
+      </Box>
+      <Box as="td" px={6} py={4} textAlign="right">
+        <RatingBadge rating={rating} size="sm" />
+      </Box>
+      <Box as="td" px={6} py={4} textAlign="right">
+        <Text size="sm" weight="semibold" font="mono" color="text-performance-green">
+          {wins}
+        </Text>
+      </Box>
+    </Box>
+  );
+}