69 lines
2.8 KiB
TypeScript
69 lines
2.8 KiB
TypeScript
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>
|
|
);
|
|
}
|