37 lines
935 B
TypeScript
37 lines
935 B
TypeScript
import { LucideIcon } from 'lucide-react';
|
|
import { Box } from './Box';
|
|
import { CategoryDistributionCard } from './CategoryDistributionCard';
|
|
|
|
export interface CategoryData {
|
|
id: string;
|
|
label: string;
|
|
count: number;
|
|
icon: LucideIcon;
|
|
intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
|
|
}
|
|
|
|
export interface CategoryDistributionProps {
|
|
categories: CategoryData[];
|
|
}
|
|
|
|
export const CategoryDistribution = ({
|
|
categories
|
|
}: CategoryDistributionProps) => {
|
|
const total = categories.reduce((acc, cat) => acc + cat.count, 0);
|
|
|
|
return (
|
|
<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>
|
|
);
|
|
};
|