@tohuhono/puck-blocks
Version:
A collection of puck components for building pages in OberonCMS
96 lines (95 loc) • 3.16 kB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
import { ResponsiveContainer, LineChart, Line, BarChart, Bar } from "recharts";
import { Card, CardHeader, CardTitle, CardContent } from "@tohuhono/ui/card";
const data = [
{
revenue: 10400,
subscription: 240
},
{
revenue: 14405,
subscription: 300
},
{
revenue: 9400,
subscription: 200
},
{
revenue: 8200,
subscription: 278
},
{
revenue: 7e3,
subscription: 189
},
{
revenue: 9600,
subscription: 239
},
{
revenue: 11244,
subscription: 278
},
{
revenue: 26475,
subscription: 189
}
];
function CardsStats() {
return /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-2 xl:grid-cols-2", children: [
/* @__PURE__ */ jsxs(Card, { children: [
/* @__PURE__ */ jsx(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-normal", children: "Total Revenue" }) }),
/* @__PURE__ */ jsxs(CardContent, { children: [
/* @__PURE__ */ jsx("div", { className: "text-2xl font-bold", children: "$15,231.89" }),
/* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "+20.1% from last month" }),
/* @__PURE__ */ jsx("div", { className: "h-[80px]", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsx(
LineChart,
{
data,
margin: {
top: 5,
right: 10,
left: 10,
bottom: 0
},
children: /* @__PURE__ */ jsx(
Line,
{
type: "monotone",
strokeWidth: 2,
dataKey: "revenue",
activeDot: {
r: 6,
style: { fill: "hsl(var(--primary))", opacity: 0.25 }
},
style: {
stroke: "hsl(var(--primary))"
}
}
)
}
) }) })
] })
] }),
/* @__PURE__ */ jsxs(Card, { children: [
/* @__PURE__ */ jsx(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-normal", children: "Subscriptions" }) }),
/* @__PURE__ */ jsxs(CardContent, { children: [
/* @__PURE__ */ jsx("div", { className: "text-2xl font-bold", children: "+2350" }),
/* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "+180.1% from last month" }),
/* @__PURE__ */ jsx("div", { className: "mt-4 h-[80px]", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsx(BarChart, { data, children: /* @__PURE__ */ jsx(
Bar,
{
dataKey: "subscription",
style: {
fill: "hsl(var(--primary))",
opacity: 1
}
}
) }) }) })
] })
] })
] });
}
export {
CardsStats
};