50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { Box } from './primitives/Box';
|
|
import { Text } from './Text';
|
|
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;
|
|
}
|
|
|
|
export function CategoryDistributionCard({
|
|
label,
|
|
count,
|
|
percentage,
|
|
icon,
|
|
color,
|
|
bgColor,
|
|
borderColor,
|
|
}: CategoryDistributionCardProps) {
|
|
return (
|
|
<Box p={4} rounded="xl" bg={bgColor} border borderColor={borderColor}>
|
|
<Box display="flex" alignItems="center" justifyContent="between" mb={3}>
|
|
<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 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>
|
|
);
|
|
}
|