website refactor

apps/website/components/races/RaceEntryList.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import React from 'react';
+import { Users, Zap } from 'lucide-react';
+import { Card } from '@/ui/Card';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Image } from '@/ui/Image';
+import { Badge } from '@/ui/Badge';
+import { Icon } from '@/ui/Icon';
+import { Surface } from '@/ui/Surface';
+import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
+
+interface Entry {
+  id: string;
+  name: string;
+  avatarUrl: string;
+  country: string;
+  rating?: number | null;
+  isCurrentUser: boolean;
+}
+
+interface RaceEntryListProps {
+  entries: Entry[];
+  onDriverClick: (driverId: string) => void;
+}
+
+export function RaceEntryList({ entries, onDriverClick }: RaceEntryListProps) {
+  return (
+    <Card>
+      <Stack gap={4}>
+        <Stack direction="row" align="center" justify="between">
+          <Heading level={2} icon={<Icon icon={Users} size={5} color="#3b82f6" />}>Entry List</Heading>
+          <Text size="sm" color="text-gray-400">{entries.length} drivers</Text>
+        </Stack>
+
+        {entries.length === 0 ? (
+          <Stack center py={8} gap={3}>
+            <Surface variant="muted" rounded="full" padding={4}>
+              <Icon icon={Users} size={6} color="#525252" />
+            </Surface>
+            <Text color="text-gray-400">No drivers registered yet</Text>
+          </Stack>
+        ) : (
+          <Stack gap={1}>
+            {entries.map((driver, index) => (
+              <Box
+                key={driver.id}
+                onClick={() => onDriverClick(driver.id)}
+                style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', padding: '0.75rem', borderRadius: '0.75rem', cursor: 'pointer', transition: 'all 0.2s', backgroundColor: driver.isCurrentUser ? 'rgba(59, 130, 246, 0.1)' : 'transparent', border: driver.isCurrentUser ? '1px solid rgba(59, 130, 246, 0.3)' : '1px solid transparent' }}
+              >
+                <Box style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '2rem', height: '2rem', borderRadius: '0.5rem', fontWeight: 'bold', fontSize: '0.875rem', backgroundColor: '#262626', color: '#737373' }}>
+                  {index + 1}
+                </Box>
+
+                <Box style={{ position: 'relative', flexShrink: 0 }}>
+                  <Box style={{ width: '2.5rem', height: '2.5rem', borderRadius: '9999px', overflow: 'hidden', border: driver.isCurrentUser ? '2px solid #3b82f6' : 'none' }}>
+                    <Image src={driver.avatarUrl} alt={driver.name} width={40} height={40} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                  </Box>
+                  <Box style={{ position: 'absolute', bottom: '-0.125rem', right: '-0.125rem', width: '1.25rem', height: '1.25rem', borderRadius: '9999px', backgroundColor: '#0f1115', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '0.625rem' }}>
+                    {CountryFlagDisplay.fromCountryCode(driver.country).toString()}
+                  </Box>
+                </Box>
+
+                <Box style={{ flex: 1, minWidth: 0 }}>
+                  <Stack direction="row" align="center" gap={2}>
+                    <Text weight="semibold" size="sm" color={driver.isCurrentUser ? 'text-primary-blue' : 'text-white'} truncate>{driver.name}</Text>
+                    {driver.isCurrentUser && <Badge variant="primary">You</Badge>}
+                  </Stack>
+                  <Text size="xs" color="text-gray-500">{driver.country}</Text>
+                </Box>
+
+                {driver.rating != null && (
+                  <Badge variant="warning">
+                    <Icon icon={Zap} size={3} />
+                    {driver.rating}
+                  </Badge>
+                )}
+              </Box>
+            ))}
+          </Stack>
+        )}
+      </Stack>
+    </Card>
+  );
+}