73 lines
2.9 KiB
TypeScript
73 lines
2.9 KiB
TypeScript
import Card from '@/ui/Card';
|
|
|
|
interface PointsBreakdownTableProps {
|
|
positionPoints: Array<{ position: number; points: number }>;
|
|
}
|
|
|
|
export function PointsBreakdownTable({ positionPoints }: PointsBreakdownTableProps) {
|
|
const getPositionStyle = (position: number): string => {
|
|
if (position === 1) return 'bg-yellow-500 text-black';
|
|
if (position === 2) return 'bg-gray-400 text-black';
|
|
if (position === 3) return 'bg-amber-600 text-white';
|
|
return 'bg-charcoal-outline text-white';
|
|
};
|
|
|
|
const getRowHighlight = (position: number): string => {
|
|
if (position === 1) return 'bg-yellow-500/5 border-l-2 border-l-yellow-500';
|
|
if (position === 2) return 'bg-gray-400/5 border-l-2 border-l-gray-400';
|
|
if (position === 3) return 'bg-amber-600/5 border-l-2 border-l-amber-600';
|
|
return 'border-l-2 border-l-transparent';
|
|
};
|
|
|
|
const formatPosition = (position: number): string => {
|
|
if (position === 1) return '1st';
|
|
if (position === 2) return '2nd';
|
|
if (position === 3) return '3rd';
|
|
return `${position}th`;
|
|
};
|
|
|
|
return (
|
|
<Card className="overflow-hidden">
|
|
<div className="mb-4">
|
|
<h3 className="text-lg font-semibold text-white">Position Points</h3>
|
|
<p className="text-sm text-gray-400 mt-1">Points awarded by finishing position</p>
|
|
</div>
|
|
|
|
<div className="overflow-x-auto -mx-6 -mb-6">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-charcoal-outline bg-deep-graphite">
|
|
<th className="text-left py-3 px-6 font-medium text-gray-400 uppercase text-xs tracking-wider">
|
|
Position
|
|
</th>
|
|
<th className="text-right py-3 px-6 font-medium text-gray-400 uppercase text-xs tracking-wider">
|
|
Points
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{positionPoints.map(({ position, points }) => (
|
|
<tr
|
|
key={position}
|
|
className={`border-b border-charcoal-outline/50 transition-colors hover:bg-iron-gray/30 ${getRowHighlight(position)}`}
|
|
>
|
|
<td className="py-3 px-6">
|
|
<div className="flex items-center gap-3">
|
|
<div className={`w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold ${getPositionStyle(position)}`}>
|
|
{position}
|
|
</div>
|
|
<span className="text-white font-medium">{formatPosition(position)}</span>
|
|
</div>
|
|
</td>
|
|
<td className="py-3 px-6 text-right">
|
|
<span className="text-white font-semibold tabular-nums">{points}</span>
|
|
<span className="text-gray-500 ml-1">pts</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</Card>
|
|
);
|
|
} |