website refactor

apps/website/ui/DriverEntryRow.tsx

@@ -0,0 +1,118 @@
+
+
+import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
+import { Zap } from 'lucide-react';
+import { Badge } from './Badge';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Image } from './Image';
+import { Stack } from './Stack';
+import { Text } from './Text';
+
+interface DriverEntryRowProps {
+  index: number;
+  name: string;
+  avatarUrl: string;
+  country: string;
+  rating?: number | null;
+  isCurrentUser: boolean;
+  onClick: () => void;
+}
+
+export function DriverEntryRow({
+  index,
+  name,
+  avatarUrl,
+  country,
+  rating,
+  isCurrentUser,
+  onClick,
+}: DriverEntryRowProps) {
+  return (
+    <Box
+      onClick={onClick}
+      display="flex"
+      alignItems="center"
+      gap={3}
+      p={3}
+      rounded="xl"
+      cursor="pointer"
+      transition
+      bg={isCurrentUser ? 'bg-primary-blue/10' : 'transparent'}
+      border
+      borderColor={isCurrentUser ? 'border-primary-blue/30' : 'transparent'}
+      hoverBorderColor={isCurrentUser ? 'primary-blue/40' : 'charcoal-outline/20'}
+    >
+      <Box 
+        display="flex" 
+        alignItems="center" 
+        justifyContent="center" 
+        w="8" 
+        h="8" 
+        rounded="lg" 
+        bg="bg-iron-gray" 
+        color="text-gray-500"
+        style={{ fontWeight: 'bold', fontSize: '0.875rem' }}
+      >
+        {index + 1}
+      </Box>
+
+      <Box position="relative" flexShrink={0}>
+        <Box 
+          w="10" 
+          h="10" 
+          rounded="full" 
+          overflow="hidden" 
+          border={isCurrentUser} 
+          borderColor={isCurrentUser ? 'border-primary-blue' : ''}
+        >
+          <Image 
+            src={avatarUrl} 
+            alt={name} 
+            width={40} 
+            height={40} 
+            objectFit="cover" 
+            fill
+          />
+        </Box>
+        <Box 
+          position="absolute" 
+          bottom="-0.5" 
+          right="-0.5" 
+          w="5" 
+          h="5" 
+          rounded="full" 
+          bg="bg-deep-graphite" 
+          display="flex" 
+          alignItems="center" 
+          justifyContent="center" 
+          style={{ fontSize: '0.625rem' }}
+        >
+          {CountryFlagDisplay.fromCountryCode(country).toString()}
+        </Box>
+      </Box>
+
+      <Box flexGrow={1} minWidth="0">
+        <Stack direction="row" align="center" gap={2}>
+          <Text 
+            weight="semibold" 
+            size="sm" 
+            color={isCurrentUser ? 'text-primary-blue' : 'text-white'} 
+            truncate
+          >
+            {name}
+          </Text>
+          {isCurrentUser && <Badge variant="primary">You</Badge>}
+        </Stack>
+        <Text size="xs" color="text-gray-500">{country}</Text>
+      </Box>
+
+      {rating != null && (
+        <Badge variant="warning">
+          <Icon icon={Zap} size={3} />
+          {rating}
+        </Badge>
+      )}
+    </Box>
+  );
+}