39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import Link from 'next/link';
|
|
import { timeUntil } from '@/lib/utilities/time';
|
|
|
|
interface UpcomingRaceItemProps {
|
|
id: string;
|
|
track: string;
|
|
car: string;
|
|
scheduledAt: Date;
|
|
isMyLeague: boolean;
|
|
}
|
|
|
|
export function UpcomingRaceItem({
|
|
id,
|
|
track,
|
|
car,
|
|
scheduledAt,
|
|
isMyLeague,
|
|
}: UpcomingRaceItemProps) {
|
|
return (
|
|
<Link
|
|
href={`/races/${id}`}
|
|
className="block p-3 rounded-lg bg-deep-graphite border border-charcoal-outline hover:border-primary-blue/30 transition-colors"
|
|
>
|
|
<div className="flex items-start justify-between gap-2 mb-2">
|
|
<p className="text-white font-medium text-sm truncate">{track}</p>
|
|
{isMyLeague && (
|
|
<span className="flex-shrink-0 w-2 h-2 rounded-full bg-performance-green" title="Your league" />
|
|
)}
|
|
</div>
|
|
<p className="text-xs text-gray-500 truncate mb-2">{car}</p>
|
|
<div className="flex items-center justify-between text-xs">
|
|
<span className="text-gray-400">
|
|
{scheduledAt.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
|
|
</span>
|
|
<span className="text-primary-blue font-medium">{timeUntil(scheduledAt)}</span>
|
|
</div>
|
|
</Link>
|
|
);
|
|
} |