wip

apps/website/components/leagues/PointsBreakdownTable.tsx

@@ -0,0 +1,73 @@
+import Card from '@/components/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>
+  );
+}