website refactor

apps/website/components/races/RaceDetailsHeader.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import React from 'react';
+import { ChevronLeft, Calendar, MapPin } from 'lucide-react';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Icon } from '@/ui/Icon';
+import { Box } from '@/ui/Box';
+import { SessionStatusBadge, type SessionStatus } from './SessionStatusBadge';
+
+interface RaceDetailsHeaderProps {
+  title: string;
+  leagueName: string;
+  trackName: string;
+  scheduledAt: string;
+  status: SessionStatus;
+  onBack: () => void;
+}
+
+export function RaceDetailsHeader({
+  title,
+  leagueName,
+  trackName,
+  scheduledAt,
+  status,
+  onBack,
+}: RaceDetailsHeaderProps) {
+  return (
+    <Box as="header" bg="bg-surface-charcoal" borderBottom borderColor="border-outline-steel" p={6}>
+      <Stack gap={6}>
+        <Box 
+          as="button" 
+          onClick={onBack}
+          display="flex"
+          alignItems="center"
+          gap={2}
+          color="text-gray-500"
+          hoverTextColor="text-primary-accent"
+          transition
+          group
+        >
+          <Icon icon={ChevronLeft} size={4} groupHoverScale />
+          <Text size="xs" weight="bold" uppercase>Back to Schedule</Text>
+        </Box>
+
+        <Stack direction="row" justifyContent="between" alignItems="end">
+          <Stack gap={2}>
+            <Text size="xs" color="text-primary-accent" weight="bold" uppercase>
+              {leagueName}
+            </Text>
+            <Heading level={1}>{title}</Heading>
+            
+            <Box display="flex" flexWrap="wrap" gap={6} mt={2}>
+              <Stack direction="row" alignItems="center" gap={2}>
+                <Icon icon={MapPin} size={4} color="#6b7280" />
+                <Text size="sm" color="text-gray-300">{trackName}</Text>
+              </Stack>
+              <Stack direction="row" alignItems="center" gap={2}>
+                <Icon icon={Calendar} size={4} color="#6b7280" />
+                <Text size="sm" color="text-gray-300">{scheduledAt}</Text>
+              </Stack>
+            </Box>
+          </Stack>
+
+          <Box pb={2}>
+            <SessionStatusBadge status={status} />
+          </Box>
+        </Stack>
+      </Stack>
+    </Box>
+  );
+}