27 lines
888 B
TypeScript
27 lines
888 B
TypeScript
'use client';
|
|
|
|
interface HorizontalBarChartProps {
|
|
data: { label: string; value: number; color: string }[];
|
|
maxValue: number;
|
|
}
|
|
|
|
export function HorizontalBarChart({ data, maxValue }: HorizontalBarChartProps) {
|
|
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>
|
|
);
|
|
} |