website refactor

apps/website/components/races/RaceScheduleTable.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import React from 'react';
+import { Text } from '@/ui/Text';
+import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
+import { SessionStatusBadge, type SessionStatus } from './SessionStatusBadge';
+
+interface RaceRow {
+  id: string;
+  track: string;
+  car: string;
+  leagueName: string | null;
+  time: string;
+  status: SessionStatus;
+}
+
+interface RaceScheduleTableProps {
+  races: RaceRow[];
+  onRaceClick: (id: string) => void;
+}
+
+export function RaceScheduleTable({ races, onRaceClick }: RaceScheduleTableProps) {
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Time</TableHeader>
+          <TableHeader>Track</TableHeader>
+          <TableHeader>Car</TableHeader>
+          <TableHeader>League</TableHeader>
+          <TableHeader textAlign="right">Status</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {races.map((race) => (
+          <TableRow 
+            key={race.id}
+            onClick={() => onRaceClick(race.id)}
+            clickable
+          >
+            <TableCell>
+              <Text size="xs" color="text-telemetry-aqua" weight="bold">{race.time}</Text>
+            </TableCell>
+            <TableCell>
+              <Text size="sm" weight="bold" groupHoverTextColor="text-primary-accent">
+                {race.track}
+              </Text>
+            </TableCell>
+            <TableCell>
+              <Text size="xs" color="text-gray-400">{race.car}</Text>
+            </TableCell>
+            <TableCell>
+              <Text size="xs" color="text-gray-400">{race.leagueName || 'Official'}</Text>
+            </TableCell>
+            <TableCell textAlign="right">
+              <SessionStatusBadge status={race.status} />
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}