website refactor

apps/website/components/races/SessionSummaryPanel.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Panel } from '@/ui/Panel';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { StatusDot } from '@/ui/StatusDot';
+
+interface SessionSummaryPanelProps {
+  title: string;
+  status: 'live' | 'upcoming' | 'completed';
+  startTime?: string;
+  trackName?: string;
+  carName?: string;
+  className?: string;
+}
+
+/**
+ * SessionSummaryPanel
+ * 
+ * Displays a dense summary of a racing session.
+ * Part of the "Telemetry Workspace" layout.
+ */
+export function SessionSummaryPanel({
+  title,
+  status,
+  startTime,
+  trackName,
+  carName,
+  className = '',
+}: SessionSummaryPanelProps) {
+  const statusColor = status === 'live' ? '#4ED4E0' : status === 'upcoming' ? '#FFBE4D' : '#94a3b8';
+
+  return (
+    <Panel title="Session Summary" className={className}>
+      <Box display="flex" flexDirection="col" gap={3}>
+        <Box display="flex" align="center" justify="between">
+          <Text weight="bold" size="lg">{title}</Text>
+          <Box display="flex" align="center" gap={2}>
+            <StatusDot color={statusColor} pulse={status === 'live'} size={2} />
+            <Text size="xs" uppercase weight="bold" style={{ color: statusColor }}>
+              {status}
+            </Text>
+          </Box>
+        </Box>
+
+        <Box display="grid" gridCols={2} gap={4} borderTop borderStyle="solid" borderColor="border-gray/10" pt={3}>
+          {startTime && (
+            <Box>
+              <Text size="xs" color="text-gray-500" uppercase block mb={1}>Start Time</Text>
+              <Text size="sm">{startTime}</Text>
+            </Box>
+          )}
+          {trackName && (
+            <Box>
+              <Text size="xs" color="text-gray-500" uppercase block mb={1}>Track</Text>
+              <Text size="sm">{trackName}</Text>
+            </Box>
+          )}
+          {carName && (
+            <Box colSpan={2}>
+              <Text size="xs" color="text-gray-500" uppercase block mb={1}>Vehicle</Text>
+              <Text size="sm">{carName}</Text>
+            </Box>
+          )}
+        </Box>
+      </Box>
+    </Panel>
+  );
+}