wip

apps/website/components/drivers/DriverRankings.tsx

@@ -0,0 +1,81 @@
+import Card from '@/components/ui/Card';
+
+export interface DriverRanking {
+  type: 'overall' | 'league';
+  name: string;
+  rank: number;
+  totalDrivers: number;
+  percentile: number;
+  rating: number;
+}
+
+interface DriverRankingsProps {
+  rankings: DriverRanking[];
+}
+
+export default function DriverRankings({ rankings }: DriverRankingsProps) {
+  if (!rankings || rankings.length === 0) {
+    return (
+      <Card className="bg-iron-gray/60 border-charcoal-outline/80">
+        <div className="p-4">
+          <h3 className="text-lg font-semibold text-white mb-2">Rankings</h3>
+          <p className="text-sm text-gray-400">
+            No ranking data available yet. Compete in leagues to earn your first results.
+          </p>
+        </div>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="bg-iron-gray/60 border-charcoal-outline/80">
+      <div className="p-4">
+        <h3 className="text-lg font-semibold text-white mb-4">Rankings</h3>
+        <div className="space-y-3">
+          {rankings.map((ranking, index) => (
+            <div
+              key={`${ranking.type}-${ranking.name}-${index}`}
+              className="flex items-center justify-between py-2 px-3 rounded-lg bg-deep-graphite/60"
+            >
+              <div className="flex flex-col">
+                <span className="text-sm font-medium text-white">
+                  {ranking.name}
+                </span>
+                <span className="text-xs text-gray-400">
+                  {ranking.type === 'overall' ? 'Overall' : 'League'} ranking
+                </span>
+              </div>
+
+              <div className="flex items-center gap-6 text-right text-xs">
+                <div>
+                  <div className="text-primary-blue text-base font-semibold">
+                    #{ranking.rank}
+                  </div>
+                  <div className="text-gray-500">Position</div>
+                </div>
+                <div>
+                  <div className="text-white text-sm font-semibold">
+                    {ranking.totalDrivers}
+                  </div>
+                  <div className="text-gray-500">Drivers</div>
+                </div>
+                <div>
+                  <div className="text-green-400 text-sm font-semibold">
+                    {ranking.percentile.toFixed(1)}%
+                  </div>
+                  <div className="text-gray-500">Percentile</div>
+                </div>
+                <div>
+                  <div className="text-warning-amber text-sm font-semibold">
+                    {ranking.rating}
+                  </div>
+                  <div className="text-gray-500">Rating</div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </Card>
+  );
+}