import * as React from "react"; import { FormBlockCustomerSupportTicketFour } from "@/registry/form-block-customer-support-ticket-four/form-block-customer-support-ticket-four"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof FormBlockCustomerSupportTicketFour >; type SupportCategoryOption = NonNullable[number]; type KnowledgeBaseArticle = NonNullable[number]; type ContactChannel = NonNullable[number]; const CATEGORIES: SupportCategoryOption[] = [ { value: "billing", label: "Billing & invoices", description: "Invoices, refunds, tax IDs", }, { value: "workspace", label: "Workspace configuration", description: "Access, settings, automations", }, { value: "api", label: "API & integrations", description: "Webhooks, SDKs, authentication", }, { value: "other", label: "Something else", }, ]; const ARTICLES: KnowledgeBaseArticle[] = [ { id: "limits", title: "Workspace rate limits", summary: "Review burst windows, pagination caps, and recommended retry strategies.", href: "https://nextbase.help/limits", tags: ["api", "errors"], }, { id: "billing-admin", title: "How to grant billing admin access", summary: "Switch billing owners without downtime across environments.", href: "https://nextbase.help/billing-admin", tags: ["billing"], }, { id: "incident-playbook", title: "Incident playbook", summary: "Use our 5-step playbook to resolve critical incidents faster.", href: "https://nextbase.help/incident-playbook", tags: ["workspace", "critical"], }, ]; const CHANNELS: ContactChannel[] = [ { label: "Pager escalation", description: "Critical incidents page the on-call SRE within 5 minutes.", href: "https://nextbase.help/escalate", }, { label: "Slack Connect", description: "Enterprise plans can message us directly in shared Slack channels.", }, ]; export function FormBlockCustomerSupportTicketFourDemo() { const [submitted, setSubmitted] = React.useState(null); return (

{ await new Promise((resolve) => setTimeout(resolve, 1000)); setSubmitted( JSON.stringify( { values, attachments: attachments.map((file) => ({ name: file.file.name, size: file.file.size, })), }, null, 2, ), ); }} /> {submitted ? (

          {submitted}

) : null}

); } export default FormBlockCustomerSupportTicketFourDemo;

Simple