website refactor

apps/website/components/races/RaceList.tsx

@@ -19,29 +19,6 @@ interface RaceListProps {
 }
 
 export function RaceList({ racesByDate, totalCount, onRaceClick }: RaceListProps) {
-  const statusConfig = {
-    scheduled: {
-      icon: Clock,
-      variant: 'primary' as const,
-      label: 'Scheduled',
-    },
-    running: {
-      icon: PlayCircle,
-      variant: 'success' as const,
-      label: 'LIVE',
-    },
-    completed: {
-      icon: CheckCircle2,
-      variant: 'default' as const,
-      label: 'Completed',
-    },
-    cancelled: {
-      icon: XCircle,
-      variant: 'warning' as const,
-      label: 'Cancelled',
-    },
-  };
-
   if (racesByDate.length === 0) {
     return (
       <EmptyState
@@ -62,8 +39,6 @@ export function RaceList({ racesByDate, totalCount, onRaceClick }: RaceListProps
 
           <Stack gap={2}>
             {group.races.map((race) => {
-              const config = statusConfig[race.status as keyof typeof statusConfig] || statusConfig.scheduled;
-
               return (
                 <RaceListItem
                   key={race.id}
@@ -76,7 +51,9 @@ export function RaceList({ racesByDate, totalCount, onRaceClick }: RaceListProps
                   leagueHref={routes.league.detail(race.leagueId ?? '')}
                   strengthOfField={race.strengthOfField}
                   onClick={() => onRaceClick(race.id)}
-                  statusConfig={config}
+                  statusLabel={race.statusLabel}
+                  statusVariant={race.statusVariant as any}
+                  statusIconName={race.statusIconName}
                 />
               );
             })}