website refactor

apps/website/components/profile/SessionHistoryTable.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import React from 'react';
+import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
+import { Text } from '@/ui/Text';
+import { Badge } from '@/ui/Badge';
+import { Stack } from '@/ui/Stack';
+import { Trophy, Calendar } from 'lucide-react';
+
+interface SessionResult {
+  id: string;
+  date: string;
+  event: string;
+  car: string;
+  position: number;
+  fieldSize: number;
+  ratingChange: number;
+}
+
+interface SessionHistoryTableProps {
+  results: SessionResult[];
+}
+
+export function SessionHistoryTable({ results }: SessionHistoryTableProps) {
+  if (results.length === 0) {
+    return (
+      <Stack align="center" justify="center" py={12} gap={4}>
+        <Trophy size={48} color="#23272B" />
+        <Text color="#6b7280">No race history found.</Text>
+      </Stack>
+    );
+  }
+
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Date</TableHeader>
+          <TableHeader>Event</TableHeader>
+          <TableHeader>Car</TableHeader>
+          <TableHeader>Pos</TableHeader>
+          <TableHeader className="text-right">Rating</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {results.map((result) => (
+          <TableRow key={result.id}>
+            <TableCell>
+              <Stack direction="row" align="center" gap={2}>
+                <Calendar size={12} className="text-gray-500" />
+                <Text size="xs" font="mono">
+                  {new Date(result.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
+                </Text>
+              </Stack>
+            </TableCell>
+            <TableCell>
+              <Text weight="bold" size="sm">{result.event}</Text>
+            </TableCell>
+            <TableCell>
+              <Text size="xs" color="#9ca3af">{result.car}</Text>
+            </TableCell>
+            <TableCell>
+              <Stack direction="row" align="center" gap={2}>
+                <Badge 
+                  variant={result.position === 1 ? 'success' : result.position <= 3 ? 'warning' : 'default'}
+                >
+                  P{result.position}
+                </Badge>
+                <Text size="xs" color="#6b7280">/ {result.fieldSize}</Text>
+              </Stack>
+            </TableCell>
+            <TableCell className="text-right">
+              <Text 
+                size="xs" 
+                font="mono" 
+                weight="bold"
+                color={result.ratingChange >= 0 ? '#10b981' : '#ef4444'}
+              >
+                {result.ratingChange >= 0 ? '+' : ''}{result.ratingChange}
+              </Text>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}