55 lines
2.2 KiB
TypeScript
55 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import Card from '@/components/ui/Card';
|
|
|
|
interface PointsTableProps {
|
|
title?: string;
|
|
points: { position: number; points: number }[];
|
|
}
|
|
|
|
export default function PointsTable({ title = 'Points Distribution', points }: PointsTableProps) {
|
|
return (
|
|
<Card>
|
|
<h2 className="text-lg font-semibold text-white mb-4">{title}</h2>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-charcoal-outline">
|
|
<th className="text-left py-3 px-4 font-medium text-gray-400">Position</th>
|
|
<th className="text-right py-3 px-4 font-medium text-gray-400">Points</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{points.map(({ position, points: pts }) => (
|
|
<tr
|
|
key={position}
|
|
className={`border-b border-charcoal-outline/50 transition-colors hover:bg-iron-gray/30 ${
|
|
position <= 3 ? 'bg-iron-gray/20' : ''
|
|
}`}
|
|
>
|
|
<td className="py-3 px-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className={`w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold ${
|
|
position === 1 ? 'bg-yellow-500 text-black' :
|
|
position === 2 ? 'bg-gray-400 text-black' :
|
|
position === 3 ? 'bg-amber-600 text-white' :
|
|
'bg-charcoal-outline text-white'
|
|
}`}>
|
|
{position}
|
|
</div>
|
|
<span className="text-white font-medium">
|
|
{position === 1 ? '1st' : position === 2 ? '2nd' : position === 3 ? '3rd' : `${position}th`}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td className="py-3 px-4 text-right">
|
|
<span className="text-white font-semibold tabular-nums">{pts}</span>
|
|
<span className="text-gray-500 ml-1">pts</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</Card>
|
|
);
|
|
} |