69 lines
3.2 KiB
TypeScript
69 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import { BarChart3 } from 'lucide-react';
|
|
import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
|
|
|
|
const CATEGORIES = [
|
|
{ id: 'beginner', label: 'Beginner', color: 'text-green-400', bgColor: 'bg-green-400/10', borderColor: 'border-green-400/30' },
|
|
{ id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', borderColor: 'border-primary-blue/30' },
|
|
{ id: 'advanced', label: 'Advanced', color: 'text-purple-400', bgColor: 'bg-purple-400/10', borderColor: 'border-purple-400/30' },
|
|
{ id: 'pro', label: 'Pro', color: 'text-yellow-400', bgColor: 'bg-yellow-400/10', borderColor: 'border-yellow-400/30' },
|
|
{ id: 'endurance', label: 'Endurance', color: 'text-orange-400', bgColor: 'bg-orange-400/10', borderColor: 'border-orange-400/30' },
|
|
{ id: 'sprint', label: 'Sprint', color: 'text-red-400', bgColor: 'bg-red-400/10', borderColor: 'border-red-400/30' },
|
|
];
|
|
|
|
interface CategoryDistributionProps {
|
|
drivers: DriverLeaderboardItemViewModel[];
|
|
}
|
|
|
|
export function CategoryDistribution({ drivers }: CategoryDistributionProps) {
|
|
const distribution = CATEGORIES.map((category) => ({
|
|
...category,
|
|
count: drivers.filter((d) => d.category === category.id).length,
|
|
percentage: drivers.length > 0
|
|
? Math.round((drivers.filter((d) => d.category === category.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-purple-400/10 border border-purple-400/20">
|
|
<BarChart3 className="w-5 h-5 text-purple-400" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-lg font-semibold text-white">Category Distribution</h2>
|
|
<p className="text-xs text-gray-500">Driver population by category</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{distribution.map((category) => (
|
|
<div
|
|
key={category.id}
|
|
className={`p-4 rounded-xl ${category.bgColor} border ${category.borderColor}`}
|
|
>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<span className={`text-2xl font-bold ${category.color}`}>{category.count}</span>
|
|
</div>
|
|
<p className="text-white font-medium mb-1">{category.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 ${
|
|
category.id === 'beginner' ? 'bg-green-400' :
|
|
category.id === 'intermediate' ? 'bg-primary-blue' :
|
|
category.id === 'advanced' ? 'bg-purple-400' :
|
|
category.id === 'pro' ? 'bg-yellow-400' :
|
|
category.id === 'endurance' ? 'bg-orange-400' :
|
|
'bg-red-400'
|
|
}`}
|
|
style={{ width: `${category.percentage}%` }}
|
|
/>
|
|
</div>
|
|
<p className="text-xs text-gray-500 mt-1">{category.percentage}% of drivers</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |