website refactor

apps/website/components/leagues/LeagueSchedulePanel.tsx

@@ -12,6 +12,7 @@ interface RaceEvent {
   date: string;
   time: string;
   status: 'upcoming' | 'live' | 'completed';
+  strengthOfField?: number;
 }
 
 interface LeagueSchedulePanelProps {
@@ -56,6 +57,12 @@ export function LeagueSchedulePanel({ events }: LeagueSchedulePanelProps) {
                   <Stack color="text-zinc-600"><Clock size={14} /></Stack>
                   <Text size="sm" color="text-zinc-400">{event.time}</Text>
                 </Stack>
+                {event.strengthOfField && (
+                  <Stack display="flex" alignItems="center" gap={1.5}>
+                    <Text size="xs" weight="bold" color="text-zinc-500" uppercase>SOF</Text>
+                    <Text size="sm" color="text-zinc-300" font="mono">{event.strengthOfField}</Text>
+                  </Stack>
+                )}
               </Stack>
             </Stack>