alpha wip

apps/website/components/alpha/StandingsTable.tsx

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