104 lines
2.7 KiB
TypeScript
104 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import { Badge } from '@/ui/Badge';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Link } from '@/ui/Link';
|
|
import { Text } from '@/ui/Text';
|
|
import { Box } from '@/ui/Box';
|
|
import { Group } from '@/ui/Group';
|
|
import { RaceCard, RaceTimeColumn, RaceInfo } from '@/ui/RaceCard';
|
|
import { Car, Trophy, Zap, ArrowRight, Clock, PlayCircle, CheckCircle2, XCircle, HelpCircle } from 'lucide-react';
|
|
import React from 'react';
|
|
|
|
const ICON_MAP = {
|
|
Clock,
|
|
PlayCircle,
|
|
CheckCircle2,
|
|
XCircle,
|
|
HelpCircle,
|
|
};
|
|
|
|
interface RaceListItemProps {
|
|
track: string;
|
|
car: string;
|
|
timeLabel?: string;
|
|
relativeTimeLabel?: string;
|
|
dateLabel?: string;
|
|
dayLabel?: string;
|
|
status: string;
|
|
statusLabel: string;
|
|
statusVariant: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
|
|
statusIconName: string;
|
|
leagueName?: string | null;
|
|
leagueHref?: string;
|
|
strengthOfField?: number | null;
|
|
onClick: () => void;
|
|
}
|
|
|
|
export function RaceListItem({
|
|
track,
|
|
car,
|
|
timeLabel,
|
|
relativeTimeLabel,
|
|
dateLabel,
|
|
dayLabel,
|
|
status,
|
|
statusLabel,
|
|
statusVariant,
|
|
statusIconName,
|
|
leagueName,
|
|
leagueHref,
|
|
strengthOfField,
|
|
onClick,
|
|
}: RaceListItemProps) {
|
|
const isLive = status === 'running';
|
|
const StatusIcon = ICON_MAP[statusIconName as keyof typeof ICON_MAP] || HelpCircle;
|
|
|
|
return (
|
|
<RaceCard onClick={onClick} isLive={isLive}>
|
|
<RaceTimeColumn
|
|
date={dateLabel}
|
|
time={dayLabel || timeLabel || ''}
|
|
relativeTime={relativeTimeLabel || timeLabel}
|
|
isLive={isLive}
|
|
/>
|
|
|
|
<Box width="1px" height="2.5rem" bg="var(--ui-color-border-muted)" opacity={0.2} />
|
|
|
|
<RaceInfo
|
|
title={track}
|
|
subtitle={car}
|
|
badge={
|
|
<Badge variant={statusVariant}>
|
|
<Icon icon={StatusIcon} size={3.5} />
|
|
{statusLabel}
|
|
</Badge>
|
|
}
|
|
meta={
|
|
<Group gap={4}>
|
|
{strengthOfField && (
|
|
<Group gap={1}>
|
|
<Icon icon={Zap} size={3.5} intent="warning" />
|
|
<Text size="sm" variant="low">SOF {strengthOfField}</Text>
|
|
</Group>
|
|
)}
|
|
{leagueName && leagueHref && (
|
|
<Link
|
|
href={leagueHref}
|
|
onClick={(e) => e.stopPropagation()}
|
|
variant="primary"
|
|
>
|
|
<Group gap={1}>
|
|
<Icon icon={Trophy} size={3.5} intent="primary" />
|
|
<Text size="sm" variant="primary">{leagueName}</Text>
|
|
<Icon icon={ArrowRight} size={3} intent="primary" />
|
|
</Group>
|
|
</Link>
|
|
)}
|
|
</Group>
|
|
}
|
|
/>
|
|
</RaceCard>
|
|
);
|
|
}
|