78 lines
2.3 KiB
TypeScript
78 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 { Clock, MapPin, Car, ChevronRight } from 'lucide-react';
|
|
import { Button } from '@/ui/Button';
|
|
import Link from 'next/link';
|
|
|
|
interface NextUpRacePanelProps {
|
|
race: any;
|
|
onRaceClick: (id: string) => void;
|
|
}
|
|
|
|
export function NextUpRacePanel({ race, onRaceClick }: NextUpRacePanelProps) {
|
|
if (!race) return null;
|
|
|
|
return (
|
|
<Stack gap={3}>
|
|
<Text size="xs" variant="low" weight="bold" uppercase letterSpacing="widest" paddingX={1}>
|
|
Next Up
|
|
</Text>
|
|
|
|
<Surface
|
|
as={Link}
|
|
href={`/races/${race.id}`}
|
|
variant="precision"
|
|
padding="lg"
|
|
onClick={(e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
onRaceClick(race.id);
|
|
}}
|
|
cursor="pointer"
|
|
hoverBg="rgba(255, 255, 255, 0.02)"
|
|
display="block"
|
|
style={{ textDecoration: 'none', color: 'inherit' }}
|
|
>
|
|
<Stack direction={{ base: 'col', md: 'row' }} justify="between" align={{ base: 'start', md: 'center' }} gap={6}>
|
|
<Stack gap={4} flex={1}>
|
|
<Stack gap={1}>
|
|
<Text size="xs" variant="primary" weight="bold" uppercase letterSpacing="widest">
|
|
{race.leagueName}
|
|
</Text>
|
|
<Text size="2xl" weight="bold">
|
|
{race.track}
|
|
</Text>
|
|
</Stack>
|
|
|
|
<Stack direction="row" gap={6} wrap>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={Clock} size={4} intent="low" />
|
|
<Text size="sm" weight="medium">{race.timeLabel}</Text>
|
|
</Stack>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={Car} size={4} intent="low" />
|
|
<Text size="sm" weight="medium">{race.car}</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Button
|
|
variant="primary"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onRaceClick(race.id);
|
|
}}
|
|
icon={<Icon icon={ChevronRight} size={4} />}
|
|
>
|
|
View Details
|
|
</Button>
|
|
</Stack>
|
|
</Surface>
|
|
</Stack>
|
|
);
|
|
}
|