81 lines
2.9 KiB
TypeScript
81 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { Standing } from '@gridpilot/racing/domain/entities/Standing';
|
|
import { Driver } from '@gridpilot/racing/domain/entities/Driver';
|
|
|
|
interface StandingsTableProps {
|
|
standings: Standing[];
|
|
drivers: Driver[];
|
|
leagueId: string;
|
|
}
|
|
|
|
export default function StandingsTable({ standings, drivers, leagueId }: StandingsTableProps) {
|
|
const getDriverName = (driverId: string): string => {
|
|
const driver = drivers.find((d) => d.id === driverId);
|
|
return driver?.name || 'Unknown Driver';
|
|
};
|
|
|
|
if (standings.length === 0) {
|
|
return (
|
|
<div className="text-center py-8 text-gray-400">
|
|
No standings available
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-charcoal-outline">
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Pos</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Driver</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Points</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Wins</th>
|
|
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Races</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{standings.map((standing) => {
|
|
const isLeader = standing.position === 1;
|
|
|
|
return (
|
|
<tr
|
|
key={`${standing.leagueId}-${standing.driverId}`}
|
|
className="border-b border-charcoal-outline/50 hover:bg-iron-gray/20 transition-colors"
|
|
>
|
|
<td className="py-3 px-4">
|
|
<span className={`font-semibold ${isLeader ? 'text-yellow-500' : 'text-white'}`}>
|
|
{standing.position}
|
|
</span>
|
|
</td>
|
|
<td className="py-3 px-4">
|
|
<Link
|
|
href={`/drivers/${standing.driverId}?from=league&leagueId=${leagueId}`}
|
|
className={
|
|
isLeader
|
|
? 'text-white font-semibold hover:text-primary-blue transition-colors'
|
|
: 'text-white hover:text-primary-blue transition-colors'
|
|
}
|
|
>
|
|
{getDriverName(standing.driverId)}
|
|
</Link>
|
|
</td>
|
|
<td className="py-3 px-4">
|
|
<span className="text-white font-medium">{standing.points}</span>
|
|
</td>
|
|
<td className="py-3 px-4">
|
|
<span className="text-white">{standing.wins}</span>
|
|
</td>
|
|
<td className="py-3 px-4">
|
|
<span className="text-white">{standing.racesCompleted}</span>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
} |