website refactor

apps/website/components/races/PointsTable.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Card } from '@/ui/Card';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
+
+interface PointsTableProps {
+  title?: string;
+  points: { position: number; points: number }[];
+}
+
+export function PointsTable({ title = 'Points Distribution', points }: PointsTableProps) {
+  return (
+    <Card>
+      <Heading level={2} mb={4}>{title}</Heading>
+      <Box overflow="auto">
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableHeader>Position</TableHeader>
+              <TableHeader className="text-right">Points</TableHeader>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {points.map(({ position, points: pts }) => (
+              <TableRow
+                key={position}
+                className={position <= 3 ? 'bg-iron-gray/20' : ''}
+              >
+                <TableCell>
+                  <Box display="flex" alignItems="center" gap={3}>
+                    <Box 
+                      w="7" 
+                      h="7" 
+                      rounded="full" 
+                      display="flex" 
+                      alignItems="center" 
+                      justifyContent="center" 
+                      className={`text-xs font-bold ${
+                        position === 1 ? 'bg-yellow-500 text-black' :
+                        position === 2 ? 'bg-gray-400 text-black' :
+                        position === 3 ? 'bg-amber-600 text-white' :
+                        'bg-charcoal-outline text-white'
+                      }`}
+                    >
+                      {position}
+                    </Box>
+                    <Text color="text-white" weight="medium">
+                      {position === 1 ? '1st' : position === 2 ? '2nd' : position === 3 ? '3rd' : `${position}th`}
+                    </Text>
+                  </Box>
+                </TableCell>
+                <TableCell className="text-right">
+                  <Text color="text-white" weight="semibold" className="tabular-nums">{pts}</Text>
+                  <Text color="text-gray-500" ml={1}>pts</Text>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </Box>
+    </Card>
+  );
+}