website refactor

apps/website/components/leagues/ScheduleRaceCard.tsx

@@ -15,8 +15,10 @@ interface Race {
   name: string;
   track?: string;
   car?: string;
-  scheduledAt: string;
+  formattedDate: string;
+  formattedTime: string;
   status: string;
+  statusLabel: string;
   sessionType?: string;
   isPast?: boolean;
 }
@@ -33,19 +35,19 @@ export function ScheduleRaceCard({ race }: ScheduleRaceCardProps) {
           <Stack w="3" h="3" rounded="full" bg={race.isPast ? 'bg-performance-green' : 'bg-primary-blue'} />
           <Heading level={3} fontSize="lg">{race.name}</Heading>
           <Badge variant={race.status === 'completed' ? 'success' : 'primary'}>
-            {race.status === 'completed' ? 'Completed' : 'Scheduled'}
+            {race.statusLabel}
           </Badge>
         </Stack>
 
         <Grid cols={4} gap={4}>
           <Stack direction="row" align="center" gap={2}>
             <Icon icon={Calendar} size={4} color="#9ca3af" />
-            <Text size="sm" color="text-gray-300">{new Date(race.scheduledAt).toLocaleDateString()}</Text>
+            <Text size="sm" color="text-gray-300">{race.formattedDate}</Text>
           </Stack>
 
           <Stack direction="row" align="center" gap={2}>
             <Icon icon={Clock} size={4} color="#9ca3af" />
-            <Text size="sm" color="text-gray-300">{new Date(race.scheduledAt).toLocaleTimeString()}</Text>
+            <Text size="sm" color="text-gray-300">{race.formattedTime}</Text>
           </Stack>
 
           {race.track && (