44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
|
|
|
|
import { ChevronRight, PlayCircle } from 'lucide-react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface LiveRaceItemProps {
|
|
track: string;
|
|
leagueName: string;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export function LiveRaceItem({ track, leagueName, onClick }: LiveRaceItemProps) {
|
|
return (
|
|
<Box
|
|
onClick={onClick}
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="between"
|
|
p={4}
|
|
bg="bg-deep-graphite/80"
|
|
rounded="lg"
|
|
border
|
|
borderColor="border-performance-green/20"
|
|
cursor="pointer"
|
|
hoverBorderColor="performance-green/40"
|
|
transition
|
|
>
|
|
<Box display="flex" alignItems="center" gap={4}>
|
|
<Box p={2} bg="bg-performance-green/20" rounded="lg">
|
|
<Icon icon={PlayCircle} size={5} color="rgb(16, 185, 129)" />
|
|
</Box>
|
|
<Box>
|
|
<Heading level={3}>{track}</Heading>
|
|
<Text size="sm" color="text-gray-400">{leagueName}</Text>
|
|
</Box>
|
|
</Box>
|
|
<Icon icon={ChevronRight} size={5} color="rgb(156, 163, 175)" />
|
|
</Box>
|
|
);
|
|
}
|