website refactor

apps/website/components/races/LiveRacesBanner.tsx

@@ -0,0 +1,59 @@
+
+
+import type { RaceViewData } from '@/lib/view-data/RacesViewData';
+import { Box } from '@/ui/Box';
+import { LiveRaceItem } from '@/ui/LiveRaceItem';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+
+interface LiveRacesBannerProps {
+  liveRaces: RaceViewData[];
+  onRaceClick: (raceId: string) => void;
+}
+
+export function LiveRacesBanner({ liveRaces, onRaceClick }: LiveRacesBannerProps) {
+  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" 
+      />
+      
+      <Box position="relative" zIndex={10}>
+        <Box mb={4}>
+          <Stack direction="row" align="center" gap={2} bg="bg-performance-green/20" px={3} py={1} rounded="full" w="fit">
+            <Box w="2" h="2" bg="bg-performance-green" rounded="full" />
+            <Text weight="semibold" size="sm" color="text-performance-green">LIVE NOW</Text>
+          </Stack>
+        </Box>
+        
+        <Stack gap={3}>
+          {liveRaces.map((race) => (
+            <LiveRaceItem
+              key={race.id}
+              track={race.track}
+              leagueName={race.leagueName ?? 'Unknown League'}
+              onClick={() => onRaceClick(race.id)}
+            />
+          ))}
+        </Stack>
+      </Box>
+    </Box>
+  );
+}