"use client"; import { createSchema, InferType } from "@buildnbuzz/buzzform"; import { toast } from "sonner"; import { CreditCardIcon, Notification02Icon, Settings01Icon, User03Icon } 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 accountSettingsSchema = createSchema([ { type: "tabs", ui: { variant: "default", spacing: "md", }, tabs: [ { label: "Profile", icon: ( ), description: "Manage your public profile information.", fields: [ { type: "text", name: "displayName", label: "Display Name", placeholder: "John Doe", required: true, }, { type: "text", name: "username", label: "Username", placeholder: "johndoe", required: true, }, { type: "textarea", name: "bio", label: "Bio", placeholder: "Tell us about yourself...", rows: 3, }, ], }, { label: "Account", icon: ( ), description: "Update your account settings and preferences.", fields: [ { type: "email", name: "email", label: "Email Address", required: true, }, { type: "password", name: "password", label: "New Password", placeholder: "Leave blank to keep current", ui: { showRequirements: true, }, }, ], }, { label: "Notifications", icon: ( ), description: "Configure how you receive notifications.", fields: [ { type: "switch", name: "emailNotifications", label: "Email Notifications", description: "Receive updates via email", defaultValue: true, }, { type: "switch", name: "pushNotifications", label: "Push Notifications", description: "Receive push notifications", defaultValue: false, }, { type: "select", name: "frequency", label: "Digest Frequency", options: ["Instant", "Daily", "Weekly", "Never"], defaultValue: "Daily", }, ], }, { label: "Billing", icon: ( ), disabled: true, fields: [ { type: "text", name: "placeholder", label: "Coming Soon", }, ], }, ], }, ]); type AccountSettingsSchema = InferType; export default function AccountSettingsForm() { return ( Account Settings Multi-step settings with tabbed navigation

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

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

), }); }} > Save Changes

); }