website refactor

apps/website/components/races/RaceListItemWrapper.tsx

@@ -2,7 +2,8 @@
 
 import { routes } from '@/lib/routing/RouteConfig';
 import { RaceListItem as UiRaceListItem } from '@/components/races/RaceListItem';
-import { CheckCircle2, Clock, PlayCircle, XCircle } from 'lucide-react';
+import { DateDisplay } from '@/lib/display-objects/DateDisplay';
+import { StatusDisplay } from '@/lib/display-objects/StatusDisplay';
 
 interface Race {
   id: string;
@@ -26,45 +27,32 @@ export function RaceListItem({ race, onClick }: RaceListItemProps) {
     scheduled: {
       iconName: 'Clock',
       variant: 'primary' as const,
-      label: 'Scheduled',
     },
     running: {
       iconName: 'PlayCircle',
       variant: 'success' as const,
-      label: 'LIVE',
     },
     completed: {
       iconName: 'CheckCircle2',
       variant: 'default' as const,
-      label: 'Completed',
     },
     cancelled: {
       iconName: 'XCircle',
       variant: 'warning' as const,
-      label: 'Cancelled',
     },
   };
 
   const config = statusConfig[race.status];
 
-  const formatTime = (date: string) => {
-    return new Date(date).toLocaleTimeString('en-US', {
-      hour: '2-digit',
-      minute: '2-digit',
-    });
-  };
-
-  const date = new Date(race.scheduledAt);
-
   return (
     <UiRaceListItem
       track={race.track}
       car={race.car}
-      dateLabel={date.toLocaleDateString('en-US', { month: 'short' })}
-      dayLabel={date.getDate().toString()}
-      timeLabel={formatTime(race.scheduledAt)}
+      dateLabel={DateDisplay.formatMonthDay(race.scheduledAt).split(' ')[0]}
+      dayLabel={DateDisplay.formatMonthDay(race.scheduledAt).split(' ')[1]}
+      timeLabel={DateDisplay.formatTime(race.scheduledAt)}
       status={race.status}
-      statusLabel={config.label}
+      statusLabel={StatusDisplay.raceStatus(race.status)}
       statusVariant={config.variant}
       statusIconName={config.iconName}
       leagueName={race.leagueName}