wip

apps/website/components/alpha/DriverRankings.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import Card from '../ui/Card';
+import RankBadge from './RankBadge';
+
+interface RankingData {
+  type: 'overall' | 'league' | 'class';
+  name: string;
+  rank: number;
+  totalDrivers: number;
+  percentile: number;
+  rating: number;
+}
+
+interface DriverRankingsProps {
+  rankings: RankingData[];
+}
+
+export default function DriverRankings({ rankings }: DriverRankingsProps) {
+  const getPercentileColor = (percentile: number) => {
+    if (percentile >= 90) return 'text-green-400';
+    if (percentile >= 75) return 'text-primary-blue';
+    if (percentile >= 50) return 'text-warning-amber';
+    return 'text-gray-400';
+  };
+
+  const getPercentileLabel = (percentile: number) => {
+    if (percentile >= 90) return 'Top 10%';
+    if (percentile >= 75) return 'Top 25%';
+    if (percentile >= 50) return 'Top 50%';
+    return `${(100 - percentile).toFixed(0)}th percentile`;
+  };
+
+  return (
+    <Card>
+      <h3 className="text-xl font-semibold text-white mb-6">Rankings</h3>
+      
+      <div className="space-y-4">
+        {rankings.map((ranking, index) => (
+          <div 
+            key={index}
+            className="p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
+          >
+            <div className="flex items-center justify-between mb-3">
+              <div className="flex items-center gap-3">
+                <RankBadge rank={ranking.rank} size="md" />
+                <div>
+                  <div className="text-white font-medium">{ranking.name}</div>
+                  <div className="text-sm text-gray-400">
+                    {ranking.rank} of {ranking.totalDrivers} drivers
+                  </div>
+                </div>
+              </div>
+              <div className="text-right">
+                <div className="text-2xl font-bold text-primary-blue">{ranking.rating}</div>
+                <div className="text-xs text-gray-400">Rating</div>
+              </div>
+            </div>
+            
+            <div className="flex items-center justify-between text-sm">
+              <span className="text-gray-400">Percentile</span>
+              <span className={`font-medium ${getPercentileColor(ranking.percentile)}`}>
+                {getPercentileLabel(ranking.percentile)}
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {rankings.length === 0 && (
+        <div className="text-center py-8 text-gray-400">
+          No ranking data available yet.
+        </div>
+      )}
+    </Card>
+  );
+}