website refactor

apps/website/components/races/RaceHero.tsx

@@ -0,0 +1,77 @@
+
+
+import { Calendar, Car, Clock, LucideIcon } from 'lucide-react';
+import { Badge } from '@/ui/Badge';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Hero } from '@/ui/Hero';
+import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+
+interface RaceHeroProps {
+  track: string;
+  scheduledAt: string;
+  car: string;
+  status: 'scheduled' | 'running' | 'completed' | 'cancelled';
+  statusConfig: {
+    icon: LucideIcon;
+    variant: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    label: string;
+  };
+}
+
+export function RaceHero({ track, scheduledAt, car, status, statusConfig }: RaceHeroProps) {
+  const StatusIcon = statusConfig.icon;
+  const date = new Date(scheduledAt);
+
+  return (
+    <Hero variant="primary">
+      {status === 'running' && (
+        <Box 
+          position="absolute" 
+          top="0" 
+          left="0" 
+          right="0" 
+          h="1" 
+          style={{ background: 'linear-gradient(to right, #10b981, rgba(16, 185, 129, 0.5), #10b981)' }} 
+          animate="pulse"
+        />
+      )}
+
+      <Stack gap={4}>
+        <Stack direction="row" align="center" gap={3}>
+          <Badge variant={statusConfig.variant}>
+            {status === 'running' && (
+              <Box w="2" h="2" bg="bg-performance-green" rounded="full" animate="pulse" mr={1.5} />
+            )}
+            <Icon icon={StatusIcon} size={4} />
+            {statusConfig.label}
+          </Badge>
+          {status === 'scheduled' && (
+            <Text size="sm" color="text-gray-400">
+              Starts in <Text color="text-white" weight="medium">TBD</Text>
+            </Text>
+          )}
+        </Stack>
+
+        <Heading level={1} style={{ fontSize: '2.5rem' }}>{track}</Heading>
+
+        <Stack direction="row" align="center" gap={6} wrap>
+          <Stack direction="row" align="center" gap={2}>
+            <Icon icon={Calendar} size={4} color="rgb(156, 163, 175)" />
+            <Text color="text-gray-400">{date.toLocaleDateString()}</Text>
+          </Stack>
+          <Stack direction="row" align="center" gap={2}>
+            <Icon icon={Clock} size={4} color="rgb(156, 163, 175)" />
+            <Text color="text-gray-400">{date.toLocaleTimeString()}</Text>
+          </Stack>
+          <Stack direction="row" align="center" gap={2}>
+            <Icon icon={Car} size={4} color="rgb(156, 163, 175)" />
+            <Text color="text-gray-400">{car}</Text>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Hero>
+  );
+}