website refactor

apps/website/components/races/RaceResultsHeader.tsx

@@ -0,0 +1,64 @@
+
+
+import { Icon } from '@/ui/Icon';
+import { PageHero } from '@/ui/PageHero';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Calendar, Trophy, Users, Zap } from 'lucide-react';
+
+interface RaceResultsHeaderProps {
+  raceTrack: string | undefined;
+  raceScheduledAt: string | undefined;
+  totalDrivers: number | undefined;
+  leagueName: string | undefined;
+  raceSOF: number | null | undefined;
+}
+
+const DEFAULT_RACE_TRACK = 'Race';
+
+export function RaceResultsHeader({
+  raceTrack = 'Race',
+  raceScheduledAt,
+  totalDrivers,
+  leagueName,
+  raceSOF
+}: RaceResultsHeaderProps) {
+  const stats = [
+    ...(raceScheduledAt ? [{
+      icon: Calendar,
+      value: new Date(raceScheduledAt).toLocaleDateString('en-US', {
+        weekday: 'short',
+        month: 'short',
+        day: 'numeric',
+      }),
+      label: '',
+      color: 'text-gray-400'
+    }] : []),
+    ...(totalDrivers !== undefined && totalDrivers !== null ? [{
+      icon: Users,
+      value: totalDrivers,
+      label: 'drivers classified',
+      color: 'text-gray-400'
+    }] : []),
+    ...(leagueName ? [{
+      value: leagueName,
+      label: '',
+      color: 'text-primary-blue'
+    }] : [])
+  ];
+
+  return (
+    <PageHero
+      title={`${raceTrack || DEFAULT_RACE_TRACK} Results`}
+      icon={Trophy}
+      stats={stats}
+    >
+      {raceSOF && (
+        <Stack direction="row" align="center" gap={1.5} mt={4}>
+          <Icon icon={Zap} size={4} color="text-warning-amber" />
+          <Text size="sm" color="text-warning-amber">SOF {raceSOF}</Text>
+        </Stack>
+      )}
+    </PageHero>
+  );
+}