"use client"; import { createSchema, InferType } from "@buildnbuzz/buzzform"; import { toast } from "sonner"; import { CreditCardIcon, TruckIcon } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Form, FormContent, FormFields, FormSubmit, } from "@/registry/base/form"; const lineVariantSchema = createSchema([ { type: "tabs", ui: { variant: "line", defaultTab: "shipping", spacing: "lg", }, tabs: [ { name: "billing", label: "Billing", icon: ( ), fields: [ { type: "text", name: "cardName", label: "Name on Card", required: true, }, { type: "text", name: "cardNumber", label: "Card Number", placeholder: "1234 5678 9012 3456", required: true, }, { type: "row", fields: [ { type: "text", name: "expiry", label: "Expiry Date", placeholder: "MM/YY", required: true, style: { width: "50%" }, }, { type: "text", name: "cvv", label: "CVV", placeholder: "123", required: true, style: { width: "50%" }, }, ], }, ], }, { name: "shipping", label: "Shipping", icon: ( ), fields: [ { type: "text", name: "address", label: "Street Address", required: true, }, { type: "row", fields: [ { type: "text", name: "city", label: "City", required: true, style: { width: "50%" }, }, { type: "text", name: "zip", label: "ZIP Code", required: true, style: { width: "50%" }, }, ], }, { type: "select", name: "country", label: "Country", options: ["United States", "Canada", "United Kingdom", "Australia"], required: true, }, ], }, ], }, ]); type LineVariantSchema = InferType; export default function CheckoutForm() { return ( Checkout Billing and shipping in a streamlined checkout flow

{ await new Promise((r) => setTimeout(r, 1000)); toast("Order placed!", { description: (

                  {JSON.stringify(data, null, 2)}

), }); }} > Complete Order

); }