website refactor

apps/website/components/races/RaceHeaderPanel.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { RaceStatusBadge } from './RaceStatusBadge';
+import { Icon } from '@/ui/Icon';
+import { Calendar, MapPin, Car } from 'lucide-react';
+
+interface RaceHeaderPanelProps {
+  track: string;
+  car: string;
+  scheduledAt: string;
+  status: string;
+  leagueName?: string;
+  actions?: React.ReactNode;
+}
+
+export function RaceHeaderPanel({
+  track,
+  car,
+  scheduledAt,
+  status,
+  leagueName,
+  actions
+}: RaceHeaderPanelProps) {
+  return (
+    <Box 
+      bg="bg-panel-gray" 
+      rounded="xl" 
+      border 
+      borderColor="border-charcoal-outline" 
+      overflow="hidden"
+      position="relative"
+    >
+      {/* Background Accent */}
+      <Box 
+        position="absolute" 
+        top={0} 
+        left={0} 
+        right={0} 
+        height="24" 
+        bg="bg-gradient-to-r from-primary-blue/20 to-transparent"
+        opacity={0.5}
+      />
+
+      <Box p={6} position="relative">
+        <Stack direction={{ base: 'col', md: 'row' }} gap={6} align="start" className="md:items-center">
+          {/* Info */}
+          <Box flexGrow={1}>
+            <Stack gap={3}>
+              <Stack direction="row" align="center" gap={3} wrap>
+                <Text as="h1" size="3xl" weight="bold" color="text-white">
+                  {track}
+                </Text>
+                <RaceStatusBadge status={status} />
+              </Stack>
+              
+              <Stack direction="row" align="center" gap={6} wrap>
+                <Stack direction="row" align="center" gap={2}>
+                  <Icon icon={Car} size={4} color="#9ca3af" />
+                  <Text size="sm" color="text-gray-400">
+                    {car}
+                  </Text>
+                </Stack>
+
+                <Stack direction="row" align="center" gap={2}>
+                  <Icon icon={Calendar} size={4} color="#9ca3af" />
+                  <Text size="sm" color="text-gray-400">
+                    {scheduledAt}
+                  </Text>
+                </Stack>
+
+                {leagueName && (
+                  <Stack direction="row" align="center" gap={2}>
+                    <Icon icon={MapPin} size={4} color="#9ca3af" />
+                    <Text size="sm" color="text-gray-400">
+                      {leagueName}
+                    </Text>
+                  </Stack>
+                )}
+              </Stack>
+            </Stack>
+          </Box>
+
+          {/* Actions */}
+          {actions && (
+            <Box flexShrink={0} width={{ base: 'full', md: 'auto' }}>
+              {actions}
+            </Box>
+          )}
+        </Stack>
+      </Box>
+    </Box>
+  );
+}