website refactor

apps/website/components/races/RaceCard.tsx

@@ -14,31 +14,31 @@ interface RaceCardProps {
   track: string;
   car: string;
   scheduledAt: string;
+  scheduledAtLabel: string;
+  timeLabel: string;
   status: string;
+  statusLabel: string;
+  statusVariant: 'primary' | 'success' | 'warning' | 'critical' | 'default' | 'secondary' | 'info' | 'danger';
   leagueName: string;
   leagueId?: string;
   strengthOfField?: number | null;
   onClick?: () => void;
-  statusConfig: {
-    intent: 'primary' | 'success' | 'warning' | 'critical' | 'default' | 'secondary' | 'info' | 'danger';
-    icon: LucideIcon | null;
-    label: string;
-  };
 }
 
 export function RaceCard({
   track,
   car,
   scheduledAt,
+  scheduledAtLabel,
+  timeLabel,
   status,
+  statusLabel,
+  statusVariant,
   leagueName,
   leagueId,
   strengthOfField,
   onClick,
-  statusConfig,
 }: RaceCardProps) {
-  const scheduledAtDate = new Date(scheduledAt);
-
   return (
     <Card
       variant="dark"
@@ -48,10 +48,10 @@ export function RaceCard({
         {/* Time Column */}
         <Stack align="center" gap={1}>
           <Text size="lg" weight="bold" variant="high">
-            {scheduledAtDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+            {timeLabel}
           </Text>
-          <Text size="xs" variant={statusConfig.intent === 'default' ? 'low' : (statusConfig.intent as any)}>
-            {status === 'running' ? 'LIVE' : scheduledAtDate.toLocaleDateString()}
+          <Text size="xs" variant={statusVariant === 'default' ? 'low' : (statusVariant as any)}>
+            {status === 'running' ? 'LIVE' : scheduledAtLabel}
           </Text>
         </Stack>
 
@@ -83,8 +83,8 @@ export function RaceCard({
             </Stack>
 
             {/* Status Badge */}
-            <Badge variant={statusConfig.intent}>
-              {statusConfig.label}
+            <Badge variant={statusVariant}>
+              {statusLabel}
             </Badge>
           </Stack>