81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Box } from '@/ui/Box';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Zap, ChevronRight } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
|
|
interface RacesLiveRailProps {
|
|
liveRaces: any[];
|
|
onRaceClick: (id: string) => void;
|
|
}
|
|
|
|
export function RacesLiveRail({ liveRaces, onRaceClick }: RacesLiveRailProps) {
|
|
if (liveRaces.length === 0) return null;
|
|
|
|
return (
|
|
<Stack gap={3}>
|
|
<Stack direction="row" align="center" gap={2} paddingX={1}>
|
|
<Icon icon={Zap} size={3} intent="success" />
|
|
<Text size="xs" variant="success" weight="bold" uppercase letterSpacing="widest">
|
|
Live Now
|
|
</Text>
|
|
</Stack>
|
|
|
|
<Box
|
|
display="flex"
|
|
gap={4}
|
|
overflowX="auto"
|
|
paddingBottom={2}
|
|
hideScrollbar
|
|
>
|
|
{liveRaces.map(race => (
|
|
<Surface
|
|
key={race.id}
|
|
as={Link}
|
|
href={`/races/${race.id}`}
|
|
variant="precision"
|
|
padding="sm"
|
|
onClick={(e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
onRaceClick(race.id);
|
|
}}
|
|
cursor="pointer"
|
|
minWidth="280px"
|
|
position="relative"
|
|
hoverBg="rgba(255, 255, 255, 0.02)"
|
|
display="block"
|
|
style={{ textDecoration: 'none', color: 'inherit' }}
|
|
>
|
|
<Box
|
|
position="absolute"
|
|
top={0}
|
|
left={0}
|
|
right={0}
|
|
height="2px"
|
|
bg="var(--ui-color-intent-success)"
|
|
/>
|
|
<Stack gap={2}>
|
|
<Text size="xs" variant="low" weight="bold" uppercase truncate>
|
|
{race.leagueName}
|
|
</Text>
|
|
<Text size="sm" weight="bold" truncate>
|
|
{race.track}
|
|
</Text>
|
|
<Stack direction="row" align="center" justify="between">
|
|
<Text size="xs" variant="success" weight="bold">
|
|
{race.timeLabel}
|
|
</Text>
|
|
<Icon icon={ChevronRight} size={3} intent="low" />
|
|
</Stack>
|
|
</Stack>
|
|
</Surface>
|
|
))}
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
}
|