45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { ChevronRight } from 'lucide-react';
|
|
import { Box } from './Box';
|
|
import { Stack } from './Stack';
|
|
import { Text } from './Text';
|
|
import { Icon } from './Icon';
|
|
|
|
interface SidebarRaceItemProps {
|
|
race: {
|
|
id: string;
|
|
track: string;
|
|
scheduledAt: string;
|
|
};
|
|
onClick?: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function SidebarRaceItem({ race, onClick, className }: SidebarRaceItemProps) {
|
|
const scheduledAtDate = new Date(race.scheduledAt);
|
|
|
|
return (
|
|
<Box
|
|
onClick={onClick}
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={3}
|
|
p={2}
|
|
rounded="lg"
|
|
cursor="pointer"
|
|
className={`hover:bg-deep-graphite transition-colors ${className || ''}`}
|
|
>
|
|
<Box flexShrink={0} width="10" height="10" bg="bg-primary-blue/10" rounded="lg" display="flex" center>
|
|
<Text size="sm" weight="bold" color="text-primary-blue">
|
|
{scheduledAtDate.getDate()}
|
|
</Text>
|
|
</Box>
|
|
<Box flexGrow={1} minWidth="0">
|
|
<Text size="sm" weight="medium" color="text-white" block truncate>{race.track}</Text>
|
|
<Text size="xs" color="text-gray-500" block>{scheduledAtDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</Text>
|
|
</Box>
|
|
<Icon icon={ChevronRight} size={4} color="text-gray-500" />
|
|
</Box>
|
|
);
|
|
}
|