website refactor

apps/website/components/races/RaceResultsHeader.tsx

@@ -2,7 +2,7 @@
 
 import { Icon } from '@/ui/Icon';
 import { PageHero } from '@/ui/PageHero';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Calendar, Trophy, Users, Zap } from 'lucide-react';
 
@@ -23,42 +23,42 @@ export function RaceResultsHeader({
   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 gap={4}>
+        <Stack direction="row" align="center" gap={4} wrap>
+          {raceScheduledAt && (
+            <Stack direction="row" align="center" gap={2}>
+              <Icon icon={Calendar} size={4} intent="low" />
+              <Text size="sm" variant="low">
+                {new Date(raceScheduledAt).toLocaleDateString('en-US', {
+                  weekday: 'short',
+                  month: 'short',
+                  day: 'numeric',
+                })}
+              </Text>
+            </Stack>
+          )}
+          {totalDrivers !== undefined && totalDrivers !== null && (
+            <Stack direction="row" align="center" gap={2}>
+              <Icon icon={Users} size={4} intent="low" />
+              <Text size="sm" variant="low">{totalDrivers} drivers classified</Text>
+            </Stack>
+          )}
+          {leagueName && (
+            <Text size="sm" variant="primary">{leagueName}</Text>
+          )}
         </Stack>
-      )}
+
+        {raceSOF && (
+          <Stack direction="row" align="center" gap={1.5}>
+            <Icon icon={Zap} size={4} intent="warning" />
+            <Text size="sm" variant="warning">SOF {raceSOF}</Text>
+          </Stack>
+        )}
+      </Stack>
     </PageHero>
   );
 }