96 lines
2.6 KiB
TypeScript
96 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { RaceStatusBadge } from './RaceStatusBadge';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Calendar, MapPin, Car } from 'lucide-react';
|
|
|
|
interface RaceHeaderPanelProps {
|
|
track: string;
|
|
car: string;
|
|
scheduledAt: string;
|
|
status: string;
|
|
leagueName?: string;
|
|
actions?: React.ReactNode;
|
|
}
|
|
|
|
export function RaceHeaderPanel({
|
|
track,
|
|
car,
|
|
scheduledAt,
|
|
status,
|
|
leagueName,
|
|
actions
|
|
}: RaceHeaderPanelProps) {
|
|
return (
|
|
<Box
|
|
bg="bg-panel-gray"
|
|
rounded="xl"
|
|
border
|
|
borderColor="border-charcoal-outline"
|
|
overflow="hidden"
|
|
position="relative"
|
|
>
|
|
{/* Background Accent */}
|
|
<Box
|
|
position="absolute"
|
|
top={0}
|
|
left={0}
|
|
right={0}
|
|
height="24"
|
|
bg="bg-gradient-to-r from-primary-blue/20 to-transparent"
|
|
opacity={0.5}
|
|
/>
|
|
|
|
<Box p={6} position="relative">
|
|
<Stack direction={{ base: 'col', md: 'row' }} gap={6} align="start" className="md:items-center">
|
|
{/* Info */}
|
|
<Box flexGrow={1}>
|
|
<Stack gap={3}>
|
|
<Stack direction="row" align="center" gap={3} wrap>
|
|
<Text as="h1" size="3xl" weight="bold" color="text-white">
|
|
{track}
|
|
</Text>
|
|
<RaceStatusBadge status={status} />
|
|
</Stack>
|
|
|
|
<Stack direction="row" align="center" gap={6} wrap>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={Car} size={4} color="#9ca3af" />
|
|
<Text size="sm" color="text-gray-400">
|
|
{car}
|
|
</Text>
|
|
</Stack>
|
|
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={Calendar} size={4} color="#9ca3af" />
|
|
<Text size="sm" color="text-gray-400">
|
|
{scheduledAt}
|
|
</Text>
|
|
</Stack>
|
|
|
|
{leagueName && (
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={MapPin} size={4} color="#9ca3af" />
|
|
<Text size="sm" color="text-gray-400">
|
|
{leagueName}
|
|
</Text>
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
</Box>
|
|
|
|
{/* Actions */}
|
|
{actions && (
|
|
<Box flexShrink={0} width={{ base: 'full', md: 'auto' }}>
|
|
{actions}
|
|
</Box>
|
|
)}
|
|
</Stack>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|