60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
|
|
|
|
import type { RaceViewData } from '@/lib/view-data/RacesViewData';
|
|
import { Box } from '@/ui/Box';
|
|
import { LiveRaceItem } from '@/components/races/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>
|
|
);
|
|
}
|