website refactor

apps/website/components/drivers/DriverRankings.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Card } from '@/ui/Card';
+import { Heading } from '@/ui/Heading';
+import { RankingListItem } from '@/components/leaderboards/RankingListItem';
+import { RankingList } from '@/components/leaderboards/RankingList';
+import { MinimalEmptyState } from '@/components/shared/state/EmptyState';
+
+export interface DriverRanking {
+  type: 'overall' | 'league';
+  name: string;
+  rank: number;
+  totalDrivers: number;
+  percentile: number;
+  rating: number;
+}
+
+interface DriverRankingsProps {
+  rankings: DriverRanking[];
+}
+
+export function DriverRankings({ rankings }: DriverRankingsProps) {
+  if (!rankings || rankings.length === 0) {
+    return (
+      <Card bg="bg-iron-gray/60" borderColor="border-charcoal-outline/80" p={4}>
+        <Heading level={3} mb={2}>Rankings</Heading>
+        <MinimalEmptyState
+          title="No ranking data available yet"
+          description="Compete in leagues to earn your first results."
+        />
+      </Card>
+    );
+  }
+
+  return (
+    <Card bg="bg-iron-gray/60" borderColor="border-charcoal-outline/80" p={4}>
+      <Heading level={3} mb={4}>Rankings</Heading>
+      <RankingList>
+        {rankings.map((ranking, index) => (
+          <RankingListItem
+            key={`${ranking.type}-${ranking.name}-${index}`}
+            name={ranking.name}
+            type={ranking.type}
+            rank={ranking.rank}
+            totalDrivers={ranking.totalDrivers}
+            percentile={ranking.percentile}
+            rating={ranking.rating}
+          />
+        ))}
+      </RankingList>
+    </Card>
+  );
+}