@tohuhono/puck-blocks
Version:
A collection of puck components for building pages in OberonCMS
111 lines (110 loc) • 3.47 kB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
import { ResponsiveContainer, LineChart, Tooltip, Line } from "recharts";
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@tohuhono/ui/card";
const data = [
{
average: 400,
today: 240
},
{
average: 300,
today: 139
},
{
average: 200,
today: 980
},
{
average: 278,
today: 390
},
{
average: 189,
today: 480
},
{
average: 239,
today: 380
},
{
average: 349,
today: 430
}
];
function CardsMetric() {
return /* @__PURE__ */ jsxs(Card, { children: [
/* @__PURE__ */ jsxs(CardHeader, { children: [
/* @__PURE__ */ jsx(CardTitle, { children: "Exercise Minutes" }),
/* @__PURE__ */ jsx(CardDescription, { children: "Your excercise minutes are ahead of where you normally are." })
] }),
/* @__PURE__ */ jsx(CardContent, { className: "pb-4", children: /* @__PURE__ */ jsx("div", { className: "h-[200px]", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
LineChart,
{
data,
margin: {
top: 5,
right: 10,
left: 10,
bottom: 0
},
children: [
/* @__PURE__ */ jsx(
Tooltip,
{
content: ({ active, payload }) => {
var _a, _b;
if (active && payload && payload.length) {
return /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-background p-2 shadow-sm", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
/* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
/* @__PURE__ */ jsx("span", { className: "text-[0.70rem] uppercase text-muted-foreground", children: "Average" }),
/* @__PURE__ */ jsx("span", { className: "font-bold text-muted-foreground", children: (_a = payload[0]) == null ? void 0 : _a.value })
] }),
/* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
/* @__PURE__ */ jsx("span", { className: "text-[0.70rem] uppercase text-muted-foreground", children: "Today" }),
/* @__PURE__ */ jsx("span", { className: "font-bold", children: (_b = payload[1]) == null ? void 0 : _b.value })
] })
] }) });
}
return null;
}
}
),
/* @__PURE__ */ jsx(
Line,
{
type: "monotone",
strokeWidth: 2,
dataKey: "average",
activeDot: {
r: 6,
style: { fill: "hsl(var(--primary))", opacity: 0.25 }
},
style: {
stroke: "hsl(var(--primary))",
opacity: 0.25
}
}
),
/* @__PURE__ */ jsx(
Line,
{
type: "monotone",
dataKey: "today",
strokeWidth: 2,
activeDot: {
r: 8,
style: { fill: "hsl(var(--primary))" }
},
style: {
stroke: "hsl(var(--primary))"
}
}
)
]
}
) }) }) })
] });
}
export {
CardsMetric
};