@tohuhono/puck-blocks
Version:
A collection of puck components for building pages in OberonCMS
111 lines (110 loc) • 3.29 kB
JavaScript
"use client";
import { jsxs, jsx } from "react/jsx-runtime";
import * as React from "react";
import { MinusIcon, PlusIcon } from "../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@18.3.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js";
import { ResponsiveContainer, BarChart, Bar } from "recharts";
import { Button } from "@tohuhono/ui/button";
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@tohuhono/ui/card";
const data = [
{
goal: 400
},
{
goal: 300
},
{
goal: 200
},
{
goal: 300
},
{
goal: 200
},
{
goal: 278
},
{
goal: 189
},
{
goal: 239
},
{
goal: 300
},
{
goal: 200
},
{
goal: 278
},
{
goal: 189
},
{
goal: 349
}
];
function CardsActivityGoal() {
const [goal, setGoal] = React.useState(350);
function onClick(adjustment) {
setGoal(Math.max(200, Math.min(400, goal + adjustment)));
}
return /* @__PURE__ */ jsxs(Card, { children: [
/* @__PURE__ */ jsxs(CardHeader, { className: "pb-4", children: [
/* @__PURE__ */ jsx(CardTitle, { children: "Move Goal" }),
/* @__PURE__ */ jsx(CardDescription, { children: "Set your daily activity goal." })
] }),
/* @__PURE__ */ jsxs(CardContent, { className: "pb-2", children: [
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center space-x-2", children: [
/* @__PURE__ */ jsxs(
Button,
{
variant: "outline",
size: "icon",
className: "h-8 w-8 shrink-0 rounded-full",
onClick: () => onClick(-10),
disabled: goal <= 200,
children: [
/* @__PURE__ */ jsx(MinusIcon, { className: "h-4 w-4" }),
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Decrease" })
]
}
),
/* @__PURE__ */ jsxs("div", { className: "flex-1 text-center", children: [
/* @__PURE__ */ jsx("div", { className: "text-5xl font-bold tracking-tighter", children: goal }),
/* @__PURE__ */ jsx("div", { className: "text-[0.70rem] uppercase text-muted-foreground", children: "Calories/day" })
] }),
/* @__PURE__ */ jsxs(
Button,
{
variant: "outline",
size: "icon",
className: "h-8 w-8 shrink-0 rounded-full",
onClick: () => onClick(10),
disabled: goal >= 400,
children: [
/* @__PURE__ */ jsx(PlusIcon, { className: "h-4 w-4" }),
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Increase" })
]
}
)
] }),
/* @__PURE__ */ jsx("div", { className: "my-3 h-[60px]", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsx(BarChart, { data, children: /* @__PURE__ */ jsx(
Bar,
{
dataKey: "goal",
style: {
fill: "hsl(var(--primary))",
opacity: 0.2
}
}
) }) }) })
] }),
/* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(Button, { className: "w-full", children: "Set Goal" }) })
] });
}
export {
CardsActivityGoal
};