107 lines
3.2 KiB
TypeScript
107 lines
3.2 KiB
TypeScript
|
|
|
|
import { ChevronRight } from 'lucide-react';
|
|
import { Box } from './Box';
|
|
import { Card } from './Card';
|
|
import { Icon } from './Icon';
|
|
import { Link } from './Link';
|
|
import { Stack } from './Stack';
|
|
import { Text } from './Text';
|
|
|
|
interface RaceResultCardProps {
|
|
raceId: string;
|
|
track: string;
|
|
car: string;
|
|
scheduledAt: string | Date;
|
|
position: number;
|
|
startPosition: number;
|
|
incidents: number;
|
|
leagueName?: string;
|
|
showLeague?: boolean;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export function RaceResultCard({
|
|
raceId,
|
|
track,
|
|
car,
|
|
scheduledAt,
|
|
position,
|
|
startPosition,
|
|
incidents,
|
|
leagueName,
|
|
showLeague = true,
|
|
onClick,
|
|
}: RaceResultCardProps) {
|
|
const getPositionColor = (pos: number) => {
|
|
if (pos === 1) return 'text-yellow-400 bg-yellow-400/20';
|
|
if (pos === 2) return 'text-gray-300 bg-gray-400/20';
|
|
if (pos === 3) return 'text-amber-600 bg-amber-600/20';
|
|
return 'text-gray-400 bg-charcoal-outline';
|
|
};
|
|
|
|
return (
|
|
<Link
|
|
href={`/races/${raceId}`}
|
|
variant="ghost"
|
|
block
|
|
onClick={onClick}
|
|
>
|
|
<Card p={4} className="hover:border-primary-blue/50 transition-colors group">
|
|
<Box display="flex" alignItems="center" justifyContent="between" mb={2}>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Box
|
|
width="8"
|
|
height="8"
|
|
rounded="md"
|
|
display="flex"
|
|
center
|
|
weight="bold"
|
|
size="sm"
|
|
className={getPositionColor(position)}
|
|
>
|
|
P{position}
|
|
</Box>
|
|
<Box>
|
|
<Text color="text-white" weight="medium" block className="group-hover:text-primary-blue transition-colors">
|
|
{track}
|
|
</Text>
|
|
<Text size="sm" color="text-gray-400" block>{car}</Text>
|
|
</Box>
|
|
</Stack>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Box textAlign="right">
|
|
<Text size="sm" color="text-gray-400" block>
|
|
{new Date(scheduledAt).toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
})}
|
|
</Text>
|
|
{showLeague && leagueName && (
|
|
<Text size="xs" color="text-gray-500" block>{leagueName}</Text>
|
|
)}
|
|
</Box>
|
|
<Icon icon={ChevronRight} size={5} color="text-gray-500" className="group-hover:text-primary-blue transition-colors" />
|
|
</Stack>
|
|
</Box>
|
|
<Stack direction="row" align="center" gap={4} color="text-gray-500">
|
|
<Text size="xs">Started P{startPosition}</Text>
|
|
<Text size="xs">•</Text>
|
|
<Text size="xs" color={incidents === 0 ? 'text-performance-green' : incidents > 2 ? 'text-error-red' : undefined}>
|
|
{incidents}x incidents
|
|
</Text>
|
|
{position < startPosition && (
|
|
<>
|
|
<Text size="xs">•</Text>
|
|
<Text size="xs" color="text-performance-green">
|
|
+{startPosition - position} positions
|
|
</Text>
|
|
</>
|
|
)}
|
|
</Stack>
|
|
</Card>
|
|
</Link>
|
|
);
|
|
}
|