website refactor

apps/website/components/races/LiveRacesBanner.tsx

@@ -1,9 +1,12 @@
-
+'use client';
 
 import { LiveRaceItem } from '@/components/races/LiveRaceItem';
 import type { RaceViewData } from '@/lib/view-data/RacesViewData';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
+import { Panel } from '@/ui/Panel';
+import { Icon } from '@/ui/Icon';
+import { Zap } from 'lucide-react';
 
 interface LiveRacesBannerProps {
   liveRaces: RaceViewData[];
@@ -14,45 +17,26 @@ export function LiveRacesBanner({ liveRaces, onRaceClick }: LiveRacesBannerProps
   if (liveRaces.length === 0) return null;
 
   return (
-    <Stack 
-      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)"
-    >
-      <Stack 
-        position="absolute" 
-        top="0" 
-        right="0" 
-        w="32" 
-        h="32" 
-        bg="bg-performance-green/20" 
-        rounded="full" 
-        blur="xl" 
-      />
-      
-      <Stack position="relative" zIndex={10}>
-        <Stack mb={4}>
-          <Stack direction="row" align="center" gap={2} bg="bg-performance-green/20" px={3} py={1} rounded="full" w="fit">
-            <Stack w="2" h="2" bg="bg-performance-green" rounded="full" />
-            <Text weight="semibold" size="sm" color="text-performance-green">LIVE NOW</Text>
-          </Stack>
+    <Panel variant="glass" padding="md">
+      <Stack gap={4}>
+        <Stack direction="row" align="center" gap={2}>
+          <Icon icon={Zap} size={4} intent="success" animate="pulse" />
+          <Text weight="bold" size="sm" variant="success" uppercase letterSpacing="widest">
+            Live Sessions
+          </Text>
         </Stack>
         
-        <Stack gap={3}>
+        <Stack gap={2}>
           {liveRaces.map((race) => (
             <LiveRaceItem
               key={race.id}
               track={race.track}
-              leagueName={race.leagueName ?? 'Unknown League'}
+              leagueName={race.leagueName ?? 'Official'}
               onClick={() => onRaceClick(race.id)}
             />
           ))}
         </Stack>
       </Stack>
-    </Stack>
+    </Panel>
   );
 }