website refactor

apps/website/components/races/RaceCardWrapper.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+import { raceStatusConfig } from '@/lib/utilities/raceStatus';
+import { RaceCard as UiRaceCard } from '@/ui/RaceCard';
+
+interface RaceCardProps {
+  race: {
+    id: string;
+    track: string;
+    car: string;
+    scheduledAt: string;
+    status: string;
+    leagueId?: string;
+    leagueName: string;
+    strengthOfField?: number | null;
+  };
+  onClick?: () => void;
+}
+
+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}
+      status={race.status}
+      leagueName={race.leagueName}
+      leagueId={race.leagueId}
+      strengthOfField={race.strengthOfField}
+      onClick={onClick}
+      statusConfig={{
+        ...config,
+        icon: config.icon as LucideIcon | null,
+      }}
+    />
+  );
+}