init

components/volume-chart.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+
+type VolumeChartProps = {
+  data: { label: string; volumeKg: number }[];
+};
+
+export function VolumeChart({ data }: VolumeChartProps) {
+  return (
+    <div className="w-full rounded-lg border border-muted/40 bg-surface p-4">
+      <div className="mb-2 text-sm text-fg/60">Wolumen treningowy (ciężar × powtórzenia)</div>
+      <ResponsiveContainer width="100%" height={180}>
+        <BarChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
+          <XAxis dataKey="label" stroke="var(--color-fg)" opacity={0.5} fontSize={12} />
+          <YAxis stroke="var(--color-fg)" opacity={0.5} fontSize={12} width={48} />
+          <Tooltip
+            cursor={{ fill: "var(--color-bg)" }}
+            contentStyle={{
+              background: "var(--color-bg)",
+              border: "1px solid var(--color-muted)",
+              borderRadius: 8,
+              fontSize: 12,
+              color: "var(--color-fg)",
+            }}
+            formatter={(value) => [`${Math.round(Number(value)).toLocaleString("pl-PL")} kg`, "Wolumen"]}
+          />
+          <Bar dataKey="volumeKg" fill="var(--color-accent)" radius={[4, 4, 0, 0]} />
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}