website refactor

apps/website/ui/HorizontalBarChart.tsx

@@ -0,0 +1,28 @@
+
+
+
+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>
+  );
+}