website refactor

apps/website/components/races/LiveRaceBanner.tsx

@@ -0,0 +1,62 @@
+
+
+import { Box } from '@/ui/Box';
+import { LiveRaceItem } from '@/components/races/LiveRaceItem';
+import { Text } from '@/ui/Text';
+
+interface LiveRaceBannerProps {
+  liveRaces: Array<{
+    id: string;
+    track: string;
+    leagueName: string;
+  }>;
+  onRaceClick?: (raceId: string) => void;
+}
+
+export function LiveRaceBanner({ liveRaces, onRaceClick }: LiveRaceBannerProps) {
+  if (liveRaces.length === 0) return null;
+
+  return (
+    <Box 
+      position="relative" 
+      overflow="hidden" 
+      rounded="xl" 
+      p={6}
+      border
+      borderColor="border-performance-green/30"
+      bg="linear-gradient(to right, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1), transparent)"
+    >
+      <Box 
+        position="absolute" 
+        top="0" 
+        right="0" 
+        w="32" 
+        h="32" 
+        bg="bg-performance-green/20" 
+        rounded="full" 
+        blur="xl" 
+        animate="pulse" 
+      />
+
+      <Box position="relative" zIndex={10}>
+        <Box display="flex" alignItems="center" gap={2} mb={4}>
+          <Box display="flex" alignItems="center" gap={2} px={3} py={1} bg="bg-performance-green/20" rounded="full">
+            <Box as="span" w="2" h="2" bg="bg-performance-green" rounded="full" animate="pulse" />
+            <Text color="text-performance-green" weight="semibold" size="sm">LIVE NOW</Text>
+          </Box>
+        </Box>
+
+        <Box display="flex" flexDirection="col" gap={3}>
+          {liveRaces.map((race) => (
+            <LiveRaceItem
+              key={race.id}
+              track={race.track}
+              leagueName={race.leagueName}
+              onClick={() => onRaceClick?.(race.id)}
+            />
+          ))}
+        </Box>
+      </Box>
+    </Box>
+  );
+}