website refactor

apps/website/components/races/RaceList.tsx

@@ -3,11 +3,9 @@
 import { RaceListItem } from '@/components/races/RaceListItem';
 import { routes } from '@/lib/routing/RouteConfig';
 import type { RaceViewData } from '@/lib/view-data/RacesViewData';
-import { Card } from '@/ui/Card';
 import { DateHeader } from '@/ui/DateHeader';
-import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
-import { Text } from '@/ui/Text';
+import { EmptyState } from '@/ui/EmptyState';
+import { Stack } from '@/ui/Stack';
 import { Calendar, CheckCircle2, Clock, PlayCircle, XCircle } from 'lucide-react';
 
 interface RaceListProps {
@@ -46,21 +44,11 @@ export function RaceList({ racesByDate, totalCount, onRaceClick }: RaceListProps
 
   if (racesByDate.length === 0) {
     return (
-      <Card py={12} textAlign="center" bg="bg-surface-charcoal" border borderColor="border-outline-steel">
-        <Stack align="center" gap={4}>
-          <Stack p={4} bg="bg-base-black" rounded="full" border borderColor="border-outline-steel">
-            <Icon icon={Calendar} size={8} color="var(--text-gray-500)" />
-          </Stack>
-          <Stack>
-            <Text weight="medium" color="text-white" block mb={1}>No races found</Text>
-            <Text size="sm" color="text-gray-500">
-              {totalCount === 0
-                ? 'No races have been scheduled yet'
-                : 'Try adjusting your filters'}
-            </Text>
-          </Stack>
-        </Stack>
-      </Card>
+      <EmptyState
+        icon={Calendar}
+        title="No races found"
+        description={totalCount === 0 ? 'No races have been scheduled yet' : 'Try adjusting your filters'}
+      />
     );
   }
 
@@ -69,8 +57,7 @@ export function RaceList({ racesByDate, totalCount, onRaceClick }: RaceListProps
       {racesByDate.map((group) => (
         <Stack key={group.dateKey} gap={3}>
           <DateHeader 
-            label={group.dateLabel} 
-            count={group.races.length} 
+            date={group.dateLabel} 
           />
 
           <Stack gap={2}>