website refactor

apps/website/components/drivers/SkillDistribution.tsx

@@ -0,0 +1,89 @@
+
+
+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>
+  );
+}