Add React race hub frontend

frontend/src/components/StartingGridTable.tsx

@@ -0,0 +1,57 @@
+import type { EnrichedGrid } from '../types'
+import { DriverCell } from './DriverCell'
+import { formatLapTime } from '../utils'
+
+interface Props {
+  grid: EnrichedGrid[]
+}
+
+export function StartingGridTable({ grid }: Props) {
+  if (grid.length === 0) {
+    return (
+      <div className="missing-notice">
+        Starting grid not ingested. Run{' '}
+        <code>box-box --ingest-session &lt;key&gt;</code> to load this dataset.
+      </div>
+    )
+  }
+
+  return (
+    <div className="scroll-x">
+      <table className="data-table" style={{ minWidth: 380 }}>
+        <thead>
+          <tr>
+            <th className="c" style={{ width: 28 }}>P</th>
+            <th>Driver</th>
+            <th className="hide-mobile">Team</th>
+            <th className="r">Lap Time</th>
+          </tr>
+        </thead>
+        <tbody>
+          {grid.map((g) => (
+            <tr key={g.driver_number}>
+              <td className="c">
+                <span style={{ fontFamily: 'var(--f-mono)', color: 'var(--text-2)' }}>
+                  {g.position}
+                </span>
+              </td>
+              <td>
+                <DriverCell
+                  acronym={g.name_acronym || String(g.driver_number)}
+                  number={g.driver_number}
+                  colour={g.team_colour}
+                />
+              </td>
+              <td className="hide-mobile" style={{ color: 'var(--text-2)', fontSize: 11 }}>
+                {g.team_name}
+              </td>
+              <td className="r" style={{ fontFamily: 'var(--f-mono)' }}>
+                {g.lap_duration != null ? formatLapTime(g.lap_duration) : '—'}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}