36 lines
1012 B
TypeScript
36 lines
1012 B
TypeScript
import React from 'react';
|
|
import { Box } from './Box';
|
|
import { Text } from './Text';
|
|
import { ProgressBar } from './ProgressBar';
|
|
|
|
interface CategoryDistributionCardProps {
|
|
label: string;
|
|
count: number;
|
|
percentage: number;
|
|
color: string;
|
|
bgColor: string;
|
|
borderColor: string;
|
|
progressColor: string;
|
|
}
|
|
|
|
export function CategoryDistributionCard({
|
|
label,
|
|
count,
|
|
percentage,
|
|
color,
|
|
bgColor,
|
|
borderColor,
|
|
progressColor,
|
|
}: CategoryDistributionCardProps) {
|
|
return (
|
|
<Box p={4} rounded="xl" className={`${bgColor} border ${borderColor}`}>
|
|
<Box display="flex" alignItems="center" justifyContent="between" mb={3}>
|
|
<Text size="2xl" weight="bold" className={color}>{count}</Text>
|
|
</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>
|
|
</Box>
|
|
);
|
|
}
|