website refactor

apps/website/ui/CategoryDistributionCard.tsx

@@ -1,35 +1,49 @@
 import React from 'react';
 import { Box } from './primitives/Box';
 import { Text } from './Text';
-import { ProgressBar } from './ProgressBar';
+import { Icon } from './Icon';
+import { LucideIcon } from 'lucide-react';
 
 interface CategoryDistributionCardProps {
   label: string;
   count: number;
   percentage: number;
+  icon: LucideIcon;
   color: string;
   bgColor: string;
   borderColor: string;
-  progressColor: string;
 }
 
 export function CategoryDistributionCard({
   label,
   count,
   percentage,
+  icon,
   color,
   bgColor,
   borderColor,
-  progressColor,
 }: CategoryDistributionCardProps) {
   return (
-    <Box p={4} rounded="xl" className={`${bgColor} border ${borderColor}`}>
+    <Box p={4} rounded="xl" bg={bgColor} border borderColor={borderColor}>
       <Box display="flex" alignItems="center" justifyContent="between" mb={3}>
-        <Text size="2xl" weight="bold" className={color}>{count}</Text>
+        <Text size="2xl" weight="bold" color={color}>{count}</Text>
+        <Box p={2} rounded="lg" bg="bg-white/5">
+          <Icon icon={icon} size={5} color={color} />
+        </Box>
       </Box>
-      <Text color="text-white" weight="medium" block mb={1}>{label}</Text>
-      <ProgressBar value={percentage} max={100} color={progressColor} bg="bg-deep-graphite/50" />
-      <Text size="xs" color="text-gray-500" block mt={1}>{percentage}% of drivers</Text>
+      <Text size="sm" weight="medium" color="text-white" block mb={1}>
+        {label}
+      </Text>
+      <Box w="full" h="1.5" bg="bg-white/5" rounded="full" overflow="hidden">
+        <Box
+          h="full"
+          bg={color.replace('text-', 'bg-')}
+          style={{ width: `${percentage}%` }}
+        />
+      </Box>
+      <Text size="xs" color="text-gray-500" mt={2}>
+        {percentage.toFixed(1)}% of total
+      </Text>
     </Box>
   );
 }