fix e2e

apps/website/components/drivers/SkillDistribution.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { BarChart3 } from 'lucide-react';
+import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
+
+const SKILL_LEVELS = [
+  { id: 'pro', label: 'Pro', icon: BarChart3, color: 'text-yellow-400', bgColor: 'bg-yellow-400/10', borderColor: 'border-yellow-400/30' },
+  { id: 'advanced', label: 'Advanced', icon: BarChart3, color: 'text-purple-400', bgColor: 'bg-purple-400/10', borderColor: 'border-purple-400/30' },
+  { id: 'intermediate', label: 'Intermediate', icon: BarChart3, color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', borderColor: 'border-primary-blue/30' },
+  { id: 'beginner', label: 'Beginner', icon: BarChart3, color: 'text-green-400', bgColor: 'bg-green-400/10', borderColor: 'border-green-400/30' },
+];
+
+interface SkillDistributionProps {
+  drivers: DriverLeaderboardItemViewModel[];
+}
+
+export function SkillDistribution({ drivers }: SkillDistributionProps) {
+  const distribution = SKILL_LEVELS.map((level) => ({
+    ...level,
+    count: drivers.filter((d) => d.skillLevel === level.id).length,
+    percentage: drivers.length > 0
+      ? Math.round((drivers.filter((d) => d.skillLevel === level.id).length / drivers.length) * 100)
+      : 0,
+  }));
+
+  return (
+    <div className="mb-10">
+      <div className="flex items-center gap-3 mb-4">
+        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-neon-aqua/10 border border-neon-aqua/20">
+          <BarChart3 className="w-5 h-5 text-neon-aqua" />
+        </div>
+        <div>
+          <h2 className="text-lg font-semibold text-white">Skill Distribution</h2>
+          <p className="text-xs text-gray-500">Driver population by skill level</p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+        {distribution.map((level) => {
+          const Icon = level.icon;
+          return (
+            <div
+              key={level.id}
+              className={`p-4 rounded-xl ${level.bgColor} border ${level.borderColor}`}
+            >
+              <div className="flex items-center justify-between mb-3">
+                <Icon className={`w-5 h-5 ${level.color}`} />
+                <span className={`text-2xl font-bold ${level.color}`}>{level.count}</span>
+              </div>
+              <p className="text-white font-medium mb-1">{level.label}</p>
+              <div className="w-full h-2 rounded-full bg-deep-graphite/50 overflow-hidden">
+                <div
+                  className={`h-full rounded-full transition-all duration-500 ${
+                    level.id === 'pro' ? 'bg-yellow-400' :
+                    level.id === 'advanced' ? 'bg-purple-400' :
+                    level.id === 'intermediate' ? 'bg-primary-blue' :
+                    'bg-green-400'
+                  }`}
+                  style={{ width: `${level.percentage}%` }}
+                />
+              </div>
+              <p className="text-xs text-gray-500 mt-1">{level.percentage}% of drivers</p>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}