63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
|
|
|
|
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>
|
|
);
|
|
}
|