79 lines
2.7 KiB
TypeScript
79 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { ChevronRight } from 'lucide-react';
|
|
import { Race } from '@gridpilot/racing/domain/entities/Race';
|
|
import { Result } from '@gridpilot/racing/domain/entities/Result';
|
|
import { League } from '@gridpilot/racing/domain/entities/League';
|
|
|
|
interface RaceResultCardProps {
|
|
race: Race;
|
|
result: Result;
|
|
league?: League;
|
|
showLeague?: boolean;
|
|
}
|
|
|
|
export default function RaceResultCard({
|
|
race,
|
|
result,
|
|
league,
|
|
showLeague = true,
|
|
}: RaceResultCardProps) {
|
|
const getPositionColor = (position: number) => {
|
|
if (position === 1) return 'bg-green-400/20 text-green-400';
|
|
if (position === 2) return 'bg-gray-400/20 text-gray-400';
|
|
if (position === 3) return 'bg-warning-amber/20 text-warning-amber';
|
|
return 'bg-charcoal-outline text-gray-400';
|
|
};
|
|
|
|
return (
|
|
<Link
|
|
href={`/races/${race.id}`}
|
|
className="block p-4 rounded bg-deep-graphite border border-charcoal-outline hover:border-primary-blue/50 transition-colors group"
|
|
>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<div className="flex items-center gap-3">
|
|
<div className={`w-8 h-8 rounded flex items-center justify-center font-bold text-sm ${getPositionColor(result.position)}`}>
|
|
P{result.position}
|
|
</div>
|
|
<div>
|
|
<div className="text-white font-medium group-hover:text-primary-blue transition-colors">
|
|
{race.track}
|
|
</div>
|
|
<div className="text-sm text-gray-400">{race.car}</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<div className="text-right">
|
|
<div className="text-sm text-gray-400">
|
|
{race.scheduledAt.toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
})}
|
|
</div>
|
|
{showLeague && league && (
|
|
<div className="text-xs text-gray-500">{league.name}</div>
|
|
)}
|
|
</div>
|
|
<ChevronRight className="w-5 h-5 text-gray-500 group-hover:text-primary-blue transition-colors" />
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-4 text-xs text-gray-500">
|
|
<span>Started P{result.startPosition}</span>
|
|
<span>•</span>
|
|
<span className={result.incidents === 0 ? 'text-green-400' : result.incidents > 2 ? 'text-red-400' : ''}>
|
|
{result.incidents}x incidents
|
|
</span>
|
|
{result.position < result.startPosition && (
|
|
<>
|
|
<span>•</span>
|
|
<span className="text-green-400">
|
|
+{result.startPosition - result.position} positions
|
|
</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
</Link>
|
|
);
|
|
} |