28 lines
856 B
TypeScript
28 lines
856 B
TypeScript
|
|
|
|
|
|
interface BarChartProps {
|
|
data: { label: string; value: number; color: string }[];
|
|
maxValue: number;
|
|
}
|
|
|
|
export function HorizontalBarChart({ data, maxValue }: BarChartProps) {
|
|
return (
|
|
<div className="space-y-3">
|
|
{data.map((item) => (
|
|
<div key={item.label}>
|
|
<div className="flex justify-between text-sm mb-1">
|
|
<span className="text-gray-400">{item.label}</span>
|
|
<span className="text-white font-medium">{item.value}</span>
|
|
</div>
|
|
<div className="h-2 bg-charcoal-outline rounded-full overflow-hidden">
|
|
<div
|
|
className={`h-full rounded-full ${item.color} transition-all duration-500 ease-out`}
|
|
style={{ width: `${Math.min((item.value / maxValue) * 100, 100)}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
} |