54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import Link from 'next/link';
|
|
import { Crown, ChevronRight } from 'lucide-react';
|
|
|
|
interface LeagueStandingItemProps {
|
|
leagueId: string;
|
|
leagueName: string;
|
|
position: number;
|
|
points: number;
|
|
totalDrivers: number;
|
|
className?: string;
|
|
}
|
|
|
|
export function LeagueStandingItem({
|
|
leagueId,
|
|
leagueName,
|
|
position,
|
|
points,
|
|
totalDrivers,
|
|
className,
|
|
}: LeagueStandingItemProps) {
|
|
return (
|
|
<Link
|
|
href={`/leagues/${leagueId}/standings`}
|
|
className={`flex items-center gap-4 p-4 rounded-xl bg-deep-graphite border border-charcoal-outline hover:border-primary-blue/30 transition-colors group ${className || ''}`}
|
|
>
|
|
<div className={`flex h-12 w-12 items-center justify-center rounded-xl font-bold text-xl ${
|
|
position === 1 ? 'bg-yellow-400/20 text-yellow-400' :
|
|
position === 2 ? 'bg-gray-300/20 text-gray-300' :
|
|
position === 3 ? 'bg-orange-400/20 text-orange-400' :
|
|
'bg-iron-gray text-gray-400'
|
|
}`}>
|
|
{position > 0 ? `P${position}` : '-'}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-white font-semibold truncate group-hover:text-primary-blue transition-colors">
|
|
{leagueName}
|
|
</p>
|
|
<p className="text-sm text-gray-500">
|
|
{points} points • {totalDrivers} drivers
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{position <= 3 && position > 0 && (
|
|
<Crown className={`w-5 h-5 ${
|
|
position === 1 ? 'text-yellow-400' :
|
|
position === 2 ? 'text-gray-300' :
|
|
'text-orange-400'
|
|
}`} />
|
|
)}
|
|
<ChevronRight className="w-5 h-5 text-gray-500 group-hover:text-primary-blue transition-colors" />
|
|
</div>
|
|
</Link>
|
|
);
|
|
} |