75 lines
3.5 KiB
TypeScript
75 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Calendar, Clock, ChevronRight } from 'lucide-react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Button } from '@/ui/Button';
|
|
import { Link } from '@/ui/Link';
|
|
import { Surface } from '@/ui/Surface';
|
|
|
|
interface NextRaceCardProps {
|
|
nextRace: {
|
|
id: string;
|
|
track: string;
|
|
car: string;
|
|
formattedDate: string;
|
|
formattedTime: string;
|
|
timeUntil: string;
|
|
isMyLeague: boolean;
|
|
};
|
|
}
|
|
|
|
export function NextRaceCard({ nextRace }: 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 style={{ position: 'absolute', top: 0, right: 0, width: '10rem', height: '10rem', background: 'linear-gradient(to bottom left, rgba(59, 130, 246, 0.2), transparent)', borderBottomLeftRadius: '9999px' }} />
|
|
<Box style={{ position: 'relative' }}>
|
|
<Stack direction="row" align="center" gap={2} mb={4}>
|
|
<Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: 'rgba(59, 130, 246, 0.2)', border: '1px solid rgba(59, 130, 246, 0.3)', paddingLeft: '0.75rem', paddingRight: '0.75rem' }}>
|
|
<Text size="xs" weight="semibold" color="text-primary-blue" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}>Next Race</Text>
|
|
</Surface>
|
|
{nextRace.isMyLeague && (
|
|
<Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: 'rgba(16, 185, 129, 0.2)', color: '#10b981', paddingLeft: '0.5rem', paddingRight: '0.5rem' }}>
|
|
<Text size="xs" weight="medium">Your League</Text>
|
|
</Surface>
|
|
)}
|
|
</Stack>
|
|
|
|
<Stack direction="row" align="end" justify="between" wrap gap={4}>
|
|
<Box>
|
|
<Heading level={2} style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>{nextRace.track}</Heading>
|
|
<Text color="text-gray-400" block mb={3}>{nextRace.car}</Text>
|
|
<Stack direction="row" align="center" gap={4}>
|
|
<Stack direction="row" align="center" gap={1.5}>
|
|
<Calendar style={{ width: '1rem', height: '1rem', color: '#6b7280' }} />
|
|
<Text size="sm" color="text-gray-400">{nextRace.formattedDate}</Text>
|
|
</Stack>
|
|
<Stack direction="row" align="center" gap={1.5}>
|
|
<Clock style={{ width: '1rem', height: '1rem', color: '#6b7280' }} />
|
|
<Text size="sm" color="text-gray-400">{nextRace.formattedTime}</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Box>
|
|
|
|
<Stack align="end" gap={3}>
|
|
<Box style={{ 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">{nextRace.timeUntil}</Text>
|
|
</Box>
|
|
<Box>
|
|
<Link href={`/races/${nextRace.id}`} variant="ghost">
|
|
<Button variant="primary" icon={<ChevronRight style={{ width: '1rem', height: '1rem' }} />}>
|
|
View Details
|
|
</Button>
|
|
</Link>
|
|
</Box>
|
|
</Stack>
|
|
</Stack>
|
|
</Box>
|
|
</Surface>
|
|
);
|
|
}
|