website refactor

apps/website/components/races/LiveRacesBanner.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { PlayCircle, ChevronRight } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import type { RaceViewData } from '@/lib/view-data/RacesViewData';
+
+interface LiveRacesBannerProps {
+  liveRaces: RaceViewData[];
+  onRaceClick: (raceId: string) => void;
+}
+
+export function LiveRacesBanner({ liveRaces, onRaceClick }: LiveRacesBannerProps) {
+  if (liveRaces.length === 0) return null;
+
+  return (
+    <Box style={{ 
+      position: 'relative', 
+      overflow: 'hidden', 
+      borderRadius: '0.75rem', 
+      background: 'linear-gradient(to right, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1), transparent)', 
+      border: '1px solid rgba(16, 185, 129, 0.3)', 
+      padding: '1.5rem' 
+    }}>
+      <Box style={{ position: 'absolute', top: 0, right: 0, width: '8rem', height: '8rem', backgroundColor: 'rgba(16, 185, 129, 0.2)', borderRadius: '9999px', filter: 'blur(24px)' }} />
+      
+      <Box style={{ position: 'relative', zIndex: 10 }}>
+        <Box style={{ marginBottom: '1rem' }}>
+          <Stack direction="row" align="center" gap={2} style={{ backgroundColor: 'rgba(16, 185, 129, 0.2)', padding: '0.25rem 0.75rem', borderRadius: '9999px', width: 'fit-content' }}>
+            <Box style={{ width: '0.5rem', height: '0.5rem', backgroundColor: '#10b981', borderRadius: '9999px' }} />
+            <Text weight="semibold" size="sm" color="text-performance-green">LIVE NOW</Text>
+          </Stack>
+        </Box>
+        
+        <Stack gap={3}>
+          {liveRaces.map((race) => (
+            <Box
+              key={race.id}
+              onClick={() => onRaceClick(race.id)}
+              style={{ 
+                display: 'flex', 
+                alignItems: 'center', 
+                justifyContent: 'space-between', 
+                padding: '1rem', 
+                backgroundColor: 'rgba(15, 17, 21, 0.8)', 
+                borderRadius: '0.5rem', 
+                border: '1px solid rgba(16, 185, 129, 0.2)', 
+                cursor: 'pointer' 
+              }}
+            >
+              <Stack direction="row" align="center" gap={4}>
+                <Box style={{ padding: '0.5rem', backgroundColor: 'rgba(16, 185, 129, 0.2)', borderRadius: '0.5rem' }}>
+                  <PlayCircle style={{ width: '1.25rem', height: '1.25rem', color: '#10b981' }} />
+                </Box>
+                <Box>
+                  <Heading level={3}>{race.track}</Heading>
+                  <Text size="sm" color="text-gray-400">{race.leagueName}</Text>
+                </Box>
+              </Stack>
+              <ChevronRight style={{ width: '1.25rem', height: '1.25rem', color: '#9ca3af' }} />
+            </Box>
+          ))}
+        </Stack>
+      </Box>
+    </Box>
+  );
+}