124 lines
3.4 KiB
TypeScript
124 lines
3.4 KiB
TypeScript
|
|
|
|
import { Calendar, ChevronRight, Clock } from 'lucide-react';
|
|
import { Badge } from '@/ui/Badge';
|
|
import { Box } from '@/ui/Box';
|
|
import { Button } from '@/ui/Button';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Link } from '@/ui/Link';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface NextRaceCardProps {
|
|
track: string;
|
|
car: string;
|
|
formattedDate: string;
|
|
formattedTime: string;
|
|
timeUntil: string;
|
|
isMyLeague: boolean;
|
|
href: string;
|
|
}
|
|
|
|
export function NextRaceCard({
|
|
track,
|
|
car,
|
|
formattedDate,
|
|
formattedTime,
|
|
timeUntil,
|
|
isMyLeague,
|
|
href,
|
|
}: NextRaceCardProps) {
|
|
return (
|
|
<Surface
|
|
variant="muted"
|
|
rounded="xl"
|
|
border
|
|
padding={6}
|
|
style={{
|
|
position: 'relative',
|
|
overflow: 'hidden',
|
|
background: 'linear-gradient(to bottom right, #262626, rgba(38, 38, 38, 0.8))',
|
|
borderColor: 'rgba(59, 130, 246, 0.3)',
|
|
}}
|
|
>
|
|
<Box
|
|
position="absolute"
|
|
top="0"
|
|
right="0"
|
|
w="40"
|
|
h="40"
|
|
style={{
|
|
background: 'linear-gradient(to bottom left, rgba(59, 130, 246, 0.2), transparent)',
|
|
borderBottomLeftRadius: '9999px',
|
|
}}
|
|
/>
|
|
<Box position="relative">
|
|
<Stack direction="row" align="center" gap={2} mb={4}>
|
|
<Badge variant="primary" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}>
|
|
Next Race
|
|
</Badge>
|
|
{isMyLeague && (
|
|
<Badge variant="success">
|
|
Your League
|
|
</Badge>
|
|
)}
|
|
</Stack>
|
|
|
|
<Stack direction="row" align="end" justify="between" wrap gap={4}>
|
|
<Box>
|
|
<Heading level={2} style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>
|
|
{track}
|
|
</Heading>
|
|
<Text color="text-gray-400" block mb={3}>
|
|
{car}
|
|
</Text>
|
|
<Stack direction="row" align="center" gap={4}>
|
|
<Stack direction="row" align="center" gap={1.5}>
|
|
<Icon icon={Calendar} size={4} color="var(--text-gray-500)" />
|
|
<Text size="sm" color="text-gray-400">
|
|
{formattedDate}
|
|
</Text>
|
|
</Stack>
|
|
<Stack direction="row" align="center" gap={1.5}>
|
|
<Icon icon={Clock} size={4} color="var(--text-gray-500)" />
|
|
<Text size="sm" color="text-gray-400">
|
|
{formattedTime}
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Box>
|
|
|
|
<Stack align="end" gap={3}>
|
|
<Box textAlign="right">
|
|
<Text
|
|
size="xs"
|
|
color="text-gray-500"
|
|
style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}
|
|
block
|
|
mb={1}
|
|
>
|
|
Starts in
|
|
</Text>
|
|
<Text size="3xl" weight="bold" color="text-primary-blue" font="mono">
|
|
{timeUntil}
|
|
</Text>
|
|
</Box>
|
|
<Box>
|
|
<Link href={href}>
|
|
<Button
|
|
variant="primary"
|
|
icon={<Icon icon={ChevronRight} size={4} />}
|
|
>
|
|
View Details
|
|
</Button>
|
|
</Link>
|
|
</Box>
|
|
</Stack>
|
|
</Stack>
|
|
</Box>
|
|
</Surface>
|
|
);
|
|
}
|