56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import { Text } from '@/ui/Text';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Box } from '@/ui/Box';
|
|
import React from 'react';
|
|
|
|
interface SidebarRaceItemProps {
|
|
race: {
|
|
id: string;
|
|
track: string;
|
|
scheduledAt: string;
|
|
};
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export function SidebarRaceItem({ race, onClick }: SidebarRaceItemProps) {
|
|
const scheduledAtDate = new Date(race.scheduledAt);
|
|
|
|
return (
|
|
<Box
|
|
onClick={onClick}
|
|
cursor="pointer"
|
|
p={3}
|
|
rounded="md"
|
|
bg="transparent"
|
|
hoverBg="white/[0.03]"
|
|
transition
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={3}
|
|
>
|
|
<Stack
|
|
width="10"
|
|
height="10"
|
|
align="center"
|
|
justify="center"
|
|
bg="var(--ui-color-bg-base)"
|
|
border
|
|
borderColor="var(--ui-color-border-default)"
|
|
rounded="md"
|
|
>
|
|
<Text size="xs" weight="bold" variant="primary" mono>
|
|
{scheduledAtDate.getDate()}
|
|
</Text>
|
|
</Stack>
|
|
<Stack gap={0.5} flexGrow={1}>
|
|
<Text size="sm" weight="bold" variant="high" block truncate>{race.track}</Text>
|
|
<Text size="xs" variant="telemetry" mono block>
|
|
{scheduledAtDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
|
</Text>
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
}
|