website refactor

apps/website/ui/ChampionshipStandings.tsx

@@ -0,0 +1,56 @@
+
+
+import { routes } from '@/lib/routing/RouteConfig';
+import { Card } from '@/ui/Card';
+import { ChampionshipStandingsList } from '@/ui/ChampionshipStandingsList';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Link } from '@/ui/Link';
+import { Stack } from '@/ui/Stack';
+import { SummaryItem } from '@/ui/SummaryItem';
+import { Text } from '@/ui/Text';
+import { Award, ChevronRight } from 'lucide-react';
+
+interface Standing {
+  leagueId: string;
+  leagueName: string;
+  position: string;
+  points: string;
+  totalDrivers: string;
+}
+
+interface ChampionshipStandingsProps {
+  standings: Standing[];
+}
+
+export function ChampionshipStandings({ standings }: ChampionshipStandingsProps) {
+  return (
+    <Card>
+      <Stack direction="row" align="center" justify="between" mb={4}>
+        <Heading level={2} icon={<Icon icon={Award} size={5} color="var(--warning-amber)" />}>
+          Your Championship Standings
+        </Heading>
+        <Link href={routes.protected.profileLeagues} variant="primary">
+          <Stack direction="row" align="center" gap={1}>
+            <Text size="sm">View all</Text>
+            <Icon icon={ChevronRight} size={4} />
+          </Stack>
+        </Link>
+      </Stack>
+      <ChampionshipStandingsList>
+        {standings.map((summary) => (
+          <SummaryItem
+            key={summary.leagueId}
+            title={summary.leagueName}
+            subtitle={`Position ${summary.position} • ${summary.points} points`}
+            rightContent={
+              <Text size="xs" color="text-gray-400">
+                {summary.totalDrivers} drivers
+              </Text>
+            }
+          />
+        ))}
+      </ChampionshipStandingsList>
+    </Card>
+  );
+}