website refactor

apps/website/components/races/RaceEntryList.tsx

@@ -0,0 +1,61 @@
+
+
+import { Card } from '@/ui/Card';
+import { DriverEntryRow } from '@/components/drivers/DriverEntryRow';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
+import { Text } from '@/ui/Text';
+import { Users } from 'lucide-react';
+
+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="rgb(59, 130, 246)" />}>Entry List</Heading>
+          <Text size="sm" color="text-gray-400">{entries.length} drivers</Text>
+        </Stack>
+
+        {entries.length === 0 ? (
+          <Stack align="center" py={8} gap={3}>
+            <Surface variant="muted" rounded="full" p={4}>
+              <Icon icon={Users} size={6} color="rgb(82, 82, 82)" />
+            </Surface>
+            <Text color="text-gray-400">No drivers registered yet</Text>
+          </Stack>
+        ) : (
+          <Stack gap={1}>
+            {entries.map((driver, index) => (
+              <DriverEntryRow
+                key={driver.id}
+                index={index}
+                name={driver.name}
+                avatarUrl={driver.avatarUrl}
+                country={driver.country}
+                rating={driver.rating}
+                isCurrentUser={driver.isCurrentUser}
+                onClick={() => onDriverClick(driver.id)}
+              />
+            ))}
+          </Stack>
+        )}
+      </Stack>
+    </Card>
+  );
+}