69 lines
3.0 KiB
TypeScript
69 lines
3.0 KiB
TypeScript
'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>
|
|
);
|
|
} |