website refactor

apps/website/components/races/RaceListItemWrapper.tsx

@@ -0,0 +1,74 @@
+
+
+import { routes } from '@/lib/routing/RouteConfig';
+import { RaceListItem as UiRaceListItem } from '@/components/races/RaceListItem';
+import { CheckCircle2, Clock, PlayCircle, XCircle } from 'lucide-react';
+
+interface Race {
+  id: string;
+  track: string;
+  car: string;
+  scheduledAt: string;
+  status: 'scheduled' | 'running' | 'completed' | 'cancelled';
+  sessionType: string;
+  leagueId?: string | null;
+  leagueName?: string | null;
+  strengthOfField?: number | null;
+}
+
+interface RaceListItemProps {
+  race: Race;
+  onClick: (id: string) => void;
+}
+
+export function RaceListItem({ race, onClick }: RaceListItemProps) {
+  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',
+    },
+  };
+
+  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)}
+      status={race.status}
+      leagueName={race.leagueName}
+      leagueHref={race.leagueId ? routes.league.detail(race.leagueId) : undefined}
+      strengthOfField={race.strengthOfField}
+      onClick={() => onClick(race.id)}
+      statusConfig={config}
+    />
+  );
+}