@tohuhono/puck-blocks
Version:
A collection of puck components for building pages in OberonCMS
153 lines (152 loc) • 7.76 kB
JavaScript
"use client";
import { jsxs, jsx } from "react/jsx-runtime";
import { Icons } from "@tohuhono/ui/icons";
import { Button } from "@tohuhono/ui/button";
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@tohuhono/ui/card";
import { Input } from "@tohuhono/ui/input";
import { Label } from "@tohuhono/ui/label";
import { RadioGroup, RadioGroupItem } from "@tohuhono/ui/radio-group";
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@tohuhono/ui/select";
function CardsPaymentMethod() {
return /* @__PURE__ */ jsxs(Card, { children: [
/* @__PURE__ */ jsxs(CardHeader, { children: [
/* @__PURE__ */ jsx(CardTitle, { children: "Payment Method" }),
/* @__PURE__ */ jsx(CardDescription, { children: "Add a new payment method to your account." })
] }),
/* @__PURE__ */ jsxs(CardContent, { className: "grid gap-6", children: [
/* @__PURE__ */ jsxs(RadioGroup, { defaultValue: "card", className: "grid grid-cols-3 gap-4", children: [
/* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx(
RadioGroupItem,
{
value: "card",
id: "card",
className: "peer sr-only",
"aria-label": "Card"
}
),
/* @__PURE__ */ jsxs(
Label,
{
htmlFor: "card",
className: "\n flex flex-col items-center justify-between rounded-md border-2\n border-muted bg-transparent p-4\n peer-data-[state=checked]:border-primary\n hover:bg-accent hover:text-accent-foreground\n [&:has([data-state=checked])]:border-primary\n ",
children: [
/* @__PURE__ */ jsxs(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "2",
className: "mb-3 size-6",
children: [
/* @__PURE__ */ jsx("rect", { width: "20", height: "14", x: "2", y: "5", rx: "2" }),
/* @__PURE__ */ jsx("path", { d: "M2 10h20" })
]
}
),
"Card"
]
}
)
] }),
/* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx(
RadioGroupItem,
{
value: "paypal",
id: "paypal",
className: "peer sr-only",
"aria-label": "Paypal"
}
),
/* @__PURE__ */ jsxs(
Label,
{
htmlFor: "paypal",
className: "\n flex flex-col items-center justify-between rounded-md border-2\n border-muted bg-transparent p-4\n peer-data-[state=checked]:border-primary\n hover:bg-accent hover:text-accent-foreground\n [&:has([data-state=checked])]:border-primary\n ",
children: [
/* @__PURE__ */ jsx(Icons.paypal, { className: "mb-3 size-6" }),
"Paypal"
]
}
)
] }),
/* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx(
RadioGroupItem,
{
value: "apple",
id: "apple",
className: "peer sr-only",
"aria-label": "Apple"
}
),
/* @__PURE__ */ jsxs(
Label,
{
htmlFor: "apple",
className: "\n flex flex-col items-center justify-between rounded-md border-2\n border-muted bg-transparent p-4\n peer-data-[state=checked]:border-primary\n hover:bg-accent hover:text-accent-foreground\n [&:has([data-state=checked])]:border-primary\n ",
children: [
/* @__PURE__ */ jsx(Icons.apple, { className: "mb-3 size-6" }),
"Apple"
]
}
)
] })
] }),
/* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
/* @__PURE__ */ jsx(Label, { htmlFor: "name", children: "Name" }),
/* @__PURE__ */ jsx(Input, { id: "name", placeholder: "First Last" })
] }),
/* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
/* @__PURE__ */ jsx(Label, { htmlFor: "city", children: "City" }),
/* @__PURE__ */ jsx(Input, { id: "city", placeholder: "" })
] }),
/* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
/* @__PURE__ */ jsx(Label, { htmlFor: "number", children: "Card number" }),
/* @__PURE__ */ jsx(Input, { id: "number", placeholder: "" })
] }),
/* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-4", children: [
/* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
/* @__PURE__ */ jsx(Label, { htmlFor: "month", children: "Expires" }),
/* @__PURE__ */ jsxs(Select, { children: [
/* @__PURE__ */ jsx(SelectTrigger, { id: "month", "aria-label": "Month", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Month" }) }),
/* @__PURE__ */ jsxs(SelectContent, { children: [
/* @__PURE__ */ jsx(SelectItem, { value: "1", children: "January" }),
/* @__PURE__ */ jsx(SelectItem, { value: "2", children: "February" }),
/* @__PURE__ */ jsx(SelectItem, { value: "3", children: "March" }),
/* @__PURE__ */ jsx(SelectItem, { value: "4", children: "April" }),
/* @__PURE__ */ jsx(SelectItem, { value: "5", children: "May" }),
/* @__PURE__ */ jsx(SelectItem, { value: "6", children: "June" }),
/* @__PURE__ */ jsx(SelectItem, { value: "7", children: "July" }),
/* @__PURE__ */ jsx(SelectItem, { value: "8", children: "August" }),
/* @__PURE__ */ jsx(SelectItem, { value: "9", children: "September" }),
/* @__PURE__ */ jsx(SelectItem, { value: "10", children: "October" }),
/* @__PURE__ */ jsx(SelectItem, { value: "11", children: "November" }),
/* @__PURE__ */ jsx(SelectItem, { value: "12", children: "December" })
] })
] })
] }),
/* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
/* @__PURE__ */ jsx(Label, { htmlFor: "year", children: "Year" }),
/* @__PURE__ */ jsxs(Select, { children: [
/* @__PURE__ */ jsx(SelectTrigger, { id: "year", "aria-label": "Year", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Year" }) }),
/* @__PURE__ */ jsx(SelectContent, { children: Array.from({ length: 10 }, (_, i) => /* @__PURE__ */ jsx(SelectItem, { value: `${(/* @__PURE__ */ new Date()).getFullYear() + i}`, children: (/* @__PURE__ */ new Date()).getFullYear() + i }, i)) })
] })
] }),
/* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
/* @__PURE__ */ jsx(Label, { htmlFor: "cvc", children: "CVC" }),
/* @__PURE__ */ jsx(Input, { id: "cvc", placeholder: "CVC" })
] })
] })
] }),
/* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(Button, { className: "w-full", children: "Continue" }) })
] });
}
export {
CardsPaymentMethod
};