90 lines
3.3 KiB
TypeScript
90 lines
3.3 KiB
TypeScript
|
|
|
|
import { Box } from '@/ui/Box';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Text } from '@/ui/Text';
|
|
import { BarChart3 } from 'lucide-react';
|
|
|
|
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: {
|
|
skillLevel?: string;
|
|
}[];
|
|
}
|
|
|
|
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 (
|
|
<Box mb={10}>
|
|
<Box display="flex" alignItems="center" gap={3} mb={4}>
|
|
<Box
|
|
display="flex"
|
|
h="10"
|
|
w="10"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
rounded="xl"
|
|
bg="bg-neon-aqua/10"
|
|
border
|
|
borderColor="border-neon-aqua/20"
|
|
>
|
|
<Icon icon={BarChart3} size={5} color="var(--neon-aqua)" />
|
|
</Box>
|
|
<Box>
|
|
<Heading level={2}>Skill Distribution</Heading>
|
|
<Text size="xs" color="text-gray-500">Driver population by skill level</Text>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box display="grid" responsiveGridCols={{ base: 2, lg: 4 }} gap={4}>
|
|
{distribution.map((level) => {
|
|
return (
|
|
<Box
|
|
key={level.id}
|
|
p={4}
|
|
rounded="xl"
|
|
border
|
|
className={`${level.bgColor} ${level.borderColor}`}
|
|
>
|
|
<Box display="flex" alignItems="center" justifyContent="between" mb={3}>
|
|
<Icon icon={level.icon} size={5} className={level.color} />
|
|
<Text size="2xl" weight="bold" className={level.color}>{level.count}</Text>
|
|
</Box>
|
|
<Text color="text-white" weight="medium" block mb={1}>{level.label}</Text>
|
|
<Box fullWidth h="2" rounded="full" bg="bg-deep-graphite/50" overflow="hidden">
|
|
<Box
|
|
h="full"
|
|
rounded="full"
|
|
transition
|
|
className={
|
|
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}%` }}
|
|
/>
|
|
</Box>
|
|
<Text size="xs" color="text-gray-500" block mt={1}>{level.percentage}% of drivers</Text>
|
|
</Box>
|
|
);
|
|
})}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|