extract components from website

apps/website/components/leagues/PointsTable.tsx

@@ -0,0 +1,55 @@
+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>
+  );
+}