72 lines
2.6 KiB
TypeScript
72 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import { Standing } from '../../domain/entities/Standing';
|
|
import { Driver } from '../../domain/entities/Driver';
|
|
|
|
interface StandingsTableProps {
|
|
standings: Standing[];
|
|
drivers: Driver[];
|
|
}
|
|
|
|
export default function StandingsTable({ standings, drivers }: 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">
|
|
<span className={isLeader ? 'text-white font-semibold' : 'text-white'}>
|
|
{getDriverName(standing.driverId)}
|
|
</span>
|
|
</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>
|
|
);
|
|
} |