105 lines
3.8 KiB
TypeScript
105 lines
3.8 KiB
TypeScript
import Link from 'next/link';
|
|
import { ChevronRight, Car, Zap, Trophy, ArrowRight } from 'lucide-react';
|
|
import { formatTime, getRelativeTime } from '@/lib/utilities/time';
|
|
import { raceStatusConfig } from '@/lib/utilities/raceStatus';
|
|
|
|
interface RaceCardProps {
|
|
race: {
|
|
id: string;
|
|
track: string;
|
|
car: string;
|
|
scheduledAt: string;
|
|
status: string;
|
|
leagueId?: string;
|
|
leagueName: string;
|
|
strengthOfField?: number | null;
|
|
};
|
|
onClick?: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function RaceCard({ race, onClick, className }: RaceCardProps) {
|
|
const config = raceStatusConfig[race.status as keyof typeof raceStatusConfig] || {
|
|
border: 'border-charcoal-outline',
|
|
bg: 'bg-charcoal-outline',
|
|
color: 'text-gray-400',
|
|
icon: () => null,
|
|
label: 'Scheduled',
|
|
};
|
|
|
|
return (
|
|
<div
|
|
onClick={onClick}
|
|
className={`group relative overflow-hidden rounded-xl bg-iron-gray border ${config.border} p-4 cursor-pointer transition-all duration-200 hover:scale-[1.01] hover:border-primary-blue ${className || ''}`}
|
|
>
|
|
{/* Live indicator */}
|
|
{race.status === 'running' && (
|
|
<div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-performance-green via-performance-green/50 to-performance-green animate-pulse" />
|
|
)}
|
|
|
|
<div className="flex items-start gap-4">
|
|
{/* Time Column */}
|
|
<div className="flex-shrink-0 text-center min-w-[60px]">
|
|
<p className="text-lg font-bold text-white">
|
|
{formatTime(race.scheduledAt)}
|
|
</p>
|
|
<p className={`text-xs ${config.color}`}>
|
|
{race.status === 'running'
|
|
? 'LIVE'
|
|
: getRelativeTime(race.scheduledAt)}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Divider */}
|
|
<div className={`w-px self-stretch ${config.bg}`} />
|
|
|
|
{/* Main Content */}
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="min-w-0">
|
|
<h3 className="font-semibold text-white truncate group-hover:text-primary-blue transition-colors">
|
|
{race.track}
|
|
</h3>
|
|
<div className="flex items-center gap-3 mt-1">
|
|
<span className="flex items-center gap-1 text-sm text-gray-400">
|
|
<Car className="w-3.5 h-3.5" />
|
|
{race.car}
|
|
</span>
|
|
{race.strengthOfField && (
|
|
<span className="flex items-center gap-1 text-sm text-gray-400">
|
|
<Zap className="w-3.5 h-3.5 text-warning-amber" />
|
|
SOF {race.strengthOfField}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Status Badge */}
|
|
<div className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full ${config.bg} ${config.border} border`}>
|
|
{config.icon && <config.icon className={`w-3.5 h-3.5 ${config.color}`} />}
|
|
<span className={`text-xs font-medium ${config.color}`}>
|
|
{config.label}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* League Link */}
|
|
<div className="mt-3 pt-3 border-t border-charcoal-outline/50">
|
|
<Link
|
|
href={`/leagues/${race.leagueId ?? ''}`}
|
|
onClick={(e) => e.stopPropagation()}
|
|
className="inline-flex items-center gap-2 text-sm text-primary-blue hover:underline"
|
|
>
|
|
<Trophy className="w-3.5 h-3.5" />
|
|
{race.leagueName}
|
|
<ArrowRight className="w-3 h-3" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Arrow */}
|
|
<ChevronRight className="w-5 h-5 text-gray-500 group-hover:text-primary-blue transition-colors flex-shrink-0" />
|
|
</div>
|
|
</div>
|
|
);
|
|
} |