59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
import { LucideIcon } from 'lucide-react';
|
|
import { Box } from './Box';
|
|
import { Icon } from './Icon';
|
|
import { Surface } from './Surface';
|
|
import { Text } from './Text';
|
|
|
|
export interface CategoryDistributionCardProps {
|
|
label: string;
|
|
count: number;
|
|
total: number;
|
|
icon: LucideIcon;
|
|
intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
|
|
}
|
|
|
|
export const CategoryDistributionCard = ({
|
|
label,
|
|
count,
|
|
total,
|
|
icon,
|
|
intent = 'primary'
|
|
}: CategoryDistributionCardProps) => {
|
|
const percentage = total > 0 ? (count / total) * 100 : 0;
|
|
|
|
const intentColorMap = {
|
|
primary: 'var(--ui-color-intent-primary)',
|
|
success: 'var(--ui-color-intent-success)',
|
|
warning: 'var(--ui-color-intent-warning)',
|
|
critical: 'var(--ui-color-intent-critical)',
|
|
telemetry: 'var(--ui-color-intent-telemetry)',
|
|
};
|
|
|
|
return (
|
|
<Surface variant="muted" rounded="xl" padding={4} style={{ border: '1px solid var(--ui-color-border-default)' }}>
|
|
<Box display="flex" alignItems="center" justifyContent="between" marginBottom={3}>
|
|
<Text size="2xl" weight="bold" variant="high">{count}</Text>
|
|
<Box padding={2} rounded="lg" bg="var(--ui-color-bg-surface-muted)">
|
|
<Icon icon={icon} size={5} intent={intent} />
|
|
</Box>
|
|
</Box>
|
|
|
|
<Text size="sm" weight="medium" variant="high" block marginBottom={1}>
|
|
{label}
|
|
</Text>
|
|
|
|
<Box fullWidth height="0.375rem" bg="var(--ui-color-bg-surface-muted)" style={{ borderRadius: '9999px', overflow: 'hidden' }}>
|
|
<Box
|
|
fullHeight
|
|
bg={intentColorMap[intent]}
|
|
style={{ width: `${percentage}%` }}
|
|
/>
|
|
</Box>
|
|
|
|
<Text size="xs" variant="low" marginTop={2}>
|
|
{Math.round(percentage)}% of total
|
|
</Text>
|
|
</Surface>
|
|
);
|
|
};
|