website refactor

apps/website/components/races/RaceEntryList.tsx

@@ -1,10 +1,8 @@
 
 
 import { DriverEntryRow } from '@/components/drivers/DriverEntryRow';
-import { Card, Card as Surface } from '@/ui/Card';
-import { Heading } from '@/ui/Heading';
-import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Panel } from '@/ui/Panel';
+import { EmptyState } from '@/ui/EmptyState';
 import { Text } from '@/ui/Text';
 import { Users } from 'lucide-react';
 
@@ -24,37 +22,30 @@ interface RaceEntryListProps {
 
 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>
+    <Panel 
+      title="Entry List" 
+      actions={<Text size="sm" variant="low">{entries.length} drivers</Text>}
+    >
+      {entries.length === 0 ? (
+        <EmptyState
+          icon={Users}
+          title="No drivers registered yet"
+          variant="minimal"
+        />
+      ) : (
+        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)}
+          />
+        ))
+      )}
+    </Panel>
   );
 }