website refactor

apps/website/components/races/EntrantsTable.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import React from 'react';
+import { Text } from '@/ui/Text';
+import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
+import { Badge } from '@/ui/Badge';
+
+interface Entrant {
+  id: string;
+  name: string;
+  teamName?: string;
+  carName: string;
+  rating: number;
+  status: 'confirmed' | 'withdrawn' | 'pending';
+}
+
+interface EntrantsTableProps {
+  entrants: Entrant[];
+}
+
+export function EntrantsTable({ entrants }: EntrantsTableProps) {
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Driver</TableHeader>
+          <TableHeader>Team</TableHeader>
+          <TableHeader>Car</TableHeader>
+          <TableHeader textAlign="right">Rating</TableHeader>
+          <TableHeader textAlign="right">Status</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {entrants.map((entrant) => (
+          <TableRow key={entrant.id}>
+            <TableCell>
+              <Text size="sm" weight="bold">{entrant.name}</Text>
+            </TableCell>
+            <TableCell>
+              <Text size="xs" color="text-gray-400">{entrant.teamName || '-'}</Text>
+            </TableCell>
+            <TableCell>
+              <Text size="xs" color="text-gray-400">{entrant.carName}</Text>
+            </TableCell>
+            <TableCell textAlign="right">
+              <Text size="xs" font="mono" color="text-telemetry-aqua">{entrant.rating}</Text>
+            </TableCell>
+            <TableCell textAlign="right">
+              <Badge 
+                variant={
+                  entrant.status === 'confirmed' 
+                    ? 'success'
+                    : entrant.status === 'withdrawn'
+                    ? 'danger'
+                    : 'warning'
+                } 
+                size="sm"
+              >
+                {entrant.status.toUpperCase()}
+              </Badge>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}