latest

frontend/src/components/desktop/ChartPanel.tsx

@@ -0,0 +1,29 @@
+import { Card } from './Card'
+
+interface ChartPanelProps {
+  title: string
+  data: Record<string, number>
+}
+
+const BAR_COLOR = 'bg-blue-500'
+
+export function ChartPanel({ title, data }: ChartPanelProps) {
+  const entries = Object.entries(data)
+  const max = Math.max(1, ...entries.map(([, value]) => value))
+
+  return (
+    <Card title={title}>
+      <div className="flex flex-col gap-2">
+        {entries.map(([label, value]) => (
+          <div key={label} className="flex items-center gap-3">
+            <span className="w-20 shrink-0 text-xs capitalize text-gray-600 dark:text-gray-400">{label}</span>
+            <div className="h-2 flex-1 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
+              <div className={`h-full ${BAR_COLOR}`} style={{ width: `${(value / max) * 100}%` }} />
+            </div>
+            <span className="w-6 shrink-0 text-right text-xs text-gray-500 dark:text-gray-500">{value}</span>
+          </div>
+        ))}
+      </div>
+    </Card>
+  )
+}