77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
|
|
|
|
import { Badge } from '@/ui/Badge';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Hero } from '@/ui/Hero';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Calendar, Car, Clock, LucideIcon } from 'lucide-react';
|
|
|
|
interface RaceHeroProps {
|
|
track: string;
|
|
formattedDate: string;
|
|
formattedTime: string;
|
|
car: string;
|
|
status: 'scheduled' | 'running' | 'completed' | 'cancelled';
|
|
statusConfig: {
|
|
icon: LucideIcon;
|
|
variant: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
|
|
label: string;
|
|
};
|
|
}
|
|
|
|
export function RaceHero({ track, formattedDate, formattedTime, car, status, statusConfig }: RaceHeroProps) {
|
|
const StatusIcon = statusConfig.icon;
|
|
|
|
return (
|
|
<Hero variant="primary">
|
|
{status === 'running' && (
|
|
<Stack
|
|
position="absolute"
|
|
top="0"
|
|
left="0"
|
|
right="0"
|
|
h="1"
|
|
style={{ background: 'linear-gradient(to right, #10b981, rgba(16, 185, 129, 0.5), #10b981)' }}
|
|
animate="pulse"
|
|
/>
|
|
)}
|
|
|
|
<Stack gap={4}>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Badge variant={statusConfig.variant}>
|
|
{status === 'running' && (
|
|
<Stack w="2" h="2" bg="bg-performance-green" rounded="full" animate="pulse" mr={1.5} />
|
|
)}
|
|
<Icon icon={StatusIcon} size={4} />
|
|
{statusConfig.label}
|
|
</Badge>
|
|
{status === 'scheduled' && (
|
|
<Text size="sm" color="text-gray-400">
|
|
Starts in <Text color="text-white" weight="medium">TBD</Text>
|
|
</Text>
|
|
)}
|
|
</Stack>
|
|
|
|
<Heading level={1} style={{ fontSize: '2.5rem' }}>{track}</Heading>
|
|
|
|
<Stack direction="row" align="center" gap={6} wrap>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={Calendar} size={4} color="rgb(156, 163, 175)" />
|
|
<Text color="text-gray-400">{formattedDate}</Text>
|
|
</Stack>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={Clock} size={4} color="rgb(156, 163, 175)" />
|
|
<Text color="text-gray-400">{formattedTime}</Text>
|
|
</Stack>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={Car} size={4} color="rgb(156, 163, 175)" />
|
|
<Text color="text-gray-400">{car}</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
</Hero>
|
|
);
|
|
}
|