website refactor

apps/website/ui/CategoryDistribution.tsx

@@ -1,77 +1,37 @@
+import React from 'react';
+import { Box } from './primitives/Box';
+import { CategoryDistributionCard } from './CategoryDistributionCard';
+import { LucideIcon } from 'lucide-react';
 
-
-import { CategoryDistributionCard } from '@/ui/CategoryDistributionCard';
-import { Heading } from '@/ui/Heading';
-import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
-import { Text } from '@/ui/Text';
-import { BarChart3 } from 'lucide-react';
-
-const CATEGORIES = [
-  { id: 'beginner', label: 'Beginner', color: 'text-green-400', bgColor: 'bg-green-400/10', borderColor: 'border-green-400/30', progressColor: 'bg-green-400' },
-  { id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', borderColor: 'border-primary-blue/30', progressColor: 'bg-primary-blue' },
-  { id: 'advanced', label: 'Advanced', color: 'text-purple-400', bgColor: 'bg-purple-400/10', borderColor: 'border-purple-400/30', progressColor: 'bg-purple-400' },
-  { id: 'pro', label: 'Pro', color: 'text-yellow-400', bgColor: 'bg-yellow-400/10', borderColor: 'border-yellow-400/30', progressColor: 'bg-yellow-400' },
-  { id: 'endurance', label: 'Endurance', color: 'text-orange-400', bgColor: 'bg-orange-400/10', borderColor: 'border-orange-400/30', progressColor: 'bg-orange-400' },
-  { id: 'sprint', label: 'Sprint', color: 'text-red-400', bgColor: 'bg-red-400/10', borderColor: 'border-red-400/30', progressColor: 'bg-red-400' },
-];
-
-interface CategoryDistributionProps {
-  drivers: {
-    category?: string;
-  }[];
+export interface CategoryData {
+  id: string;
+  label: string;
+  count: number;
+  icon: LucideIcon;
+  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
 }
 
-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,
-  }));
+export interface CategoryDistributionProps {
+  categories: CategoryData[];
+}
+
+export const CategoryDistribution = ({ 
+  categories 
+}: CategoryDistributionProps) => {
+  const total = categories.reduce((acc, cat) => acc + cat.count, 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-purple-400/10" 
-          border 
-          borderColor="border-purple-400/20"
-        >
-          <Icon 
-            icon={BarChart3} 
-            size={5} 
-            color="rgb(192, 132, 252)" 
-          />
-        </Box>
-        <Box>
-          <Heading level={2}>Category Distribution</Heading>
-          <Text size="xs" color="text-gray-500">Driver population by category</Text>
-        </Box>
-      </Box>
-
-      <Grid cols={2} lgCols={3} gap={4}>
-        {distribution.map((category) => (
-          <CategoryDistributionCard
-            key={category.id}
-            label={category.label}
-            count={category.count}
-            percentage={category.percentage}
-            color={category.color}
-            bgColor={category.bgColor}
-            borderColor={category.borderColor}
-            progressColor={category.progressColor}
-          />
-        ))}
-      </Grid>
+    <Box display="grid" gridCols={{ base: 1, md: 2, lg: 3 }} gap={4}>
+      {categories.map((category) => (
+        <CategoryDistributionCard 
+          key={category.id}
+          label={category.label}
+          count={category.count}
+          total={total}
+          icon={category.icon}
+          intent={category.intent}
+        />
+      ))}
     </Box>
   );
-}
+};