89 lines
2.5 KiB
TypeScript
89 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { RaceRow } from '@/ui/RaceRow';
|
|
import { RaceRowCell } from '@/ui/RaceRowCell';
|
|
import { StatusBadge } from '@/ui/StatusBadge';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Clock, MapPin, Car as CarIcon } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
|
|
interface RaceListRowProps {
|
|
race: {
|
|
id: string;
|
|
track: string;
|
|
car: string;
|
|
leagueName: string;
|
|
timeLabel: string;
|
|
status: string;
|
|
isLive: boolean;
|
|
isPast: boolean;
|
|
};
|
|
onClick: (id: string) => void;
|
|
}
|
|
|
|
export function RaceListRow({ race, onClick }: RaceListRowProps) {
|
|
const status = race.isLive ? 'live' : (race.isPast ? 'past' : 'upcoming');
|
|
const emphasis = race.isPast ? 'low' : 'medium';
|
|
|
|
return (
|
|
<RaceRow
|
|
as={Link}
|
|
href={`/races/${race.id}`}
|
|
onClick={(e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
onClick(race.id);
|
|
}}
|
|
status={status}
|
|
emphasis={emphasis}
|
|
>
|
|
<RaceRowCell width="5rem" align="center">
|
|
<Stack gap={0.5} align="center">
|
|
<Text size="sm" weight="bold" variant={race.isLive ? 'success' : 'high'}>
|
|
{race.timeLabel}
|
|
</Text>
|
|
{race.isLive && (
|
|
<Text size="xs" variant="success" weight="bold" uppercase>Live</Text>
|
|
)}
|
|
</Stack>
|
|
</RaceRowCell>
|
|
|
|
<RaceRowCell label="Track">
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={MapPin} size={3} intent="low" />
|
|
<Text size="sm" weight="medium" truncate>{race.track}</Text>
|
|
</Stack>
|
|
</RaceRowCell>
|
|
|
|
<RaceRowCell label="League" hideOnMobile>
|
|
<Text size="sm" variant="low" truncate>{race.leagueName}</Text>
|
|
</RaceRowCell>
|
|
|
|
<RaceRowCell label="Car" hideOnMobile>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={CarIcon} size={3} intent="low" />
|
|
<Text size="sm" variant="low" truncate>{race.car}</Text>
|
|
</Stack>
|
|
</RaceRowCell>
|
|
|
|
<RaceRowCell width="6rem" align="right">
|
|
<StatusBadge variant={getStatusVariant(race.status)}>
|
|
{race.status}
|
|
</StatusBadge>
|
|
</RaceRowCell>
|
|
</RaceRow>
|
|
);
|
|
}
|
|
|
|
function getStatusVariant(status: string): any {
|
|
switch (status.toLowerCase()) {
|
|
case 'running': return 'success';
|
|
case 'completed': return 'neutral';
|
|
case 'cancelled': return 'error';
|
|
case 'scheduled': return 'info';
|
|
default: return 'neutral';
|
|
}
|
|
}
|