website refactor

apps/website/components/races/RaceCardWrapper.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { LucideIcon } from 'lucide-react';
-import { raceStatusConfig } from '@/lib/utilities/raceStatus';
+import { RaceStatusDisplay } from '@/lib/display-objects/RaceStatusDisplay';
+import { DateDisplay } from '@/lib/display-objects/DateDisplay';
 import { RaceCard as UiRaceCard } from './RaceCard';
 
 interface RaceCardProps {
@@ -18,28 +18,20 @@ interface RaceCardProps {
 }
 
 export function RaceCard({ race, onClick }: RaceCardProps) {
-  const config = raceStatusConfig[race.status as keyof typeof raceStatusConfig] || {
-    border: 'border-charcoal-outline',
-    bg: 'bg-charcoal-outline',
-    color: 'text-gray-400',
-    icon: null,
-    label: 'Scheduled',
-  };
-
   return (
     <UiRaceCard
       track={race.track}
       car={race.car}
       scheduledAt={race.scheduledAt}
+      scheduledAtLabel={DateDisplay.formatShort(race.scheduledAt)}
+      timeLabel={DateDisplay.formatTime(race.scheduledAt)}
       status={race.status}
+      statusLabel={RaceStatusDisplay.getLabel(race.status)}
+      statusVariant={RaceStatusDisplay.getVariant(race.status) as any}
       leagueName={race.leagueName}
       leagueId={race.leagueId}
       strengthOfField={race.strengthOfField}
       onClick={onClick}
-      statusConfig={{
-        ...config,
-        icon: config.icon as LucideIcon | null,
-      }}
     />
   );
 }