website refactor

apps/website/components/dashboard/ChampionshipStandings.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import React from 'react';
+import { Award, ChevronRight } from 'lucide-react';
+import { Card } from '@/ui/Card';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Link } from '@/ui/Link';
+import { routes } from '@/lib/routing/RouteConfig';
+
+interface Standing {
+  leagueId: string;
+  leagueName: string;
+  position: string;
+  points: string;
+  totalDrivers: string;
+}
+
+interface ChampionshipStandingsProps {
+  standings: Standing[];
+}
+
+export function ChampionshipStandings({ standings }: ChampionshipStandingsProps) {
+  return (
+    <Card>
+      <Stack gap={4}>
+        <Stack direction="row" align="center" justify="between">
+          <Heading level={2} icon={<Award style={{ width: '1.25rem', height: '1.25rem', color: '#facc15' }} />}>
+            Your Championship Standings
+          </Heading>
+          <Box>
+            <Link href={routes.protected.profileLeagues} variant="primary">
+              <Stack direction="row" align="center" gap={1}>
+                <Text size="sm">View all</Text>
+                <ChevronRight style={{ width: '1rem', height: '1rem' }} />
+              </Stack>
+            </Link>
+          </Box>
+        </Stack>
+        <Stack gap={3}>
+          {standings.map((summary) => (
+            <Box key={summary.leagueId} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0.75rem', backgroundColor: '#0f1115', borderRadius: '0.5rem' }}>
+              <Box>
+                <Text color="text-white" weight="medium" block>{summary.leagueName}</Text>
+                <Text size="xs" color="text-gray-500">Position {summary.position} • {summary.points} points</Text>
+              </Box>
+              <Text size="xs" color="text-gray-400">{summary.totalDrivers} drivers</Text>
+            </Box>
+          ))}
+        </Stack>
+      </Stack>
+    </Card>
+  );
+}