57 lines
1.2 KiB
TypeScript
57 lines
1.2 KiB
TypeScript
|
|
|
|
import { Badge } from './Badge';
|
|
import { Box } from './Box';
|
|
import { Stack } from './Stack';
|
|
import { Surface } from './Surface';
|
|
import { Text } from './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={3}
|
|
rounded="lg"
|
|
>
|
|
<Text color="text-white" weight="medium" block>
|
|
{track}
|
|
</Text>
|
|
<Text size="sm" color="text-gray-400" block>
|
|
{car}
|
|
</Text>
|
|
<Stack direction="row" align="center" gap={2} mt={1}>
|
|
<Text size="xs" color="text-gray-500">
|
|
{formattedDate}
|
|
</Text>
|
|
<Text size="xs" color="text-gray-500">
|
|
•
|
|
</Text>
|
|
<Text size="xs" color="text-gray-500">
|
|
{formattedTime}
|
|
</Text>
|
|
</Stack>
|
|
{isMyLeague && (
|
|
<Box mt={1}>
|
|
<Badge variant="success">
|
|
Your League
|
|
</Badge>
|
|
</Box>
|
|
)}
|
|
</Surface>
|
|
);
|
|
}
|