61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
|
|
|
|
import { Badge } from '@/ui/Badge';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface UpcomingRaceItemProps {
|
|
track: string;
|
|
car: string;
|
|
formattedDate: string;
|
|
formattedTime: string;
|
|
isMyLeague: boolean;
|
|
}
|
|
|
|
export function UpcomingRaceItem({
|
|
track,
|
|
car,
|
|
formattedDate,
|
|
formattedTime,
|
|
isMyLeague,
|
|
}: UpcomingRaceItemProps) {
|
|
return (
|
|
<Surface
|
|
variant="muted"
|
|
padding={4}
|
|
rounded="none"
|
|
border
|
|
borderColor="border-gray/30"
|
|
className="hover:border-primary-accent/30 transition-colors bg-panel-gray/20 group"
|
|
>
|
|
<Stack direction="row" align="center" gap={4}>
|
|
<Stack w="1" h="8" bg="primary-accent" opacity={0.3} className="group-hover:opacity-100 transition-opacity" />
|
|
<Stack flexGrow={1}>
|
|
<Text color="text-white" weight="bold" block className="tracking-tight">
|
|
{track}
|
|
</Text>
|
|
<Text size="xs" color="text-gray-500" block weight="medium" className="uppercase tracking-widest mt-0.5">
|
|
{car}
|
|
</Text>
|
|
</Stack>
|
|
<Stack align="end" gap={1}>
|
|
<Text size="xs" color="text-gray-400" font="mono" weight="bold">
|
|
{formattedDate}
|
|
</Text>
|
|
<Text size="xs" color="text-gray-600" font="mono">
|
|
{formattedTime}
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
{isMyLeague && (
|
|
<Stack mt={3} display="flex" justifyContent="end">
|
|
<Badge variant="success" size="xs">
|
|
YOUR LEAGUE
|
|
</Badge>
|
|
</Stack>
|
|
)}
|
|
</Surface>
|
|
);
|
|
}
|