83:I[903690,["/chat-static/_next/static/immutable/chunks/1o6h6x663zy04.js","/chat-static/_next/static/immutable/chunks/2m82wc70tddty.js","/chat-static/_next/static/immutable/chunks/1lu-4z5bhhz4h.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3o_do00zpb1mt.js","/chat-static/_next/static/immutable/chunks/1p5y_zcqvqq8d.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/258a4ne6m_k4p.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/1nyef2mn0xr6l.js","/chat-static/_next/static/immutable/chunks/0zhl8lkpuievb.js","/chat-static/_next/static/immutable/chunks/300wx85v17r4x.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/0ewqarb2bfu8h.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/0hzhjtks438-t.js","/chat-static/_next/static/immutable/chunks/1vocqkm3a_1im.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/026zgw65c3ahb.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/3srf9h7msbpj9.js","/chat-static/_next/static/immutable/chunks/109o97wf-h9dp.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/0-vsrzeceac3v.js","/chat-static/_next/static/immutable/chunks/1np-j802-sgrx.js","/chat-static/_next/static/immutable/chunks/2owpwowxho3m_.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/0b4i3dpg7a-jn.js","/chat-static/_next/static/immutable/chunks/29yrv11tyt1vu.js","/chat-static/_next/static/immutable/chunks/3sn4vx261dox0.js","/chat-static/_next/static/immutable/chunks/0nx1v2xq-1q6f.js","/chat-static/_next/static/immutable/chunks/11jpx637g96mg.js","/chat-static/_next/static/immutable/chunks/3cyqm8u9n5jqw.js","/chat-static/_next/static/immutable/chunks/2t6e3v_r3gzl3.js","/chat-static/_next/static/immutable/chunks/0egykxuezct38.js"],"ExplicitChatIdProvider"] 84:I[838238,["/chat-static/_next/static/immutable/chunks/1o6h6x663zy04.js","/chat-static/_next/static/immutable/chunks/2m82wc70tddty.js","/chat-static/_next/static/immutable/chunks/1lu-4z5bhhz4h.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3o_do00zpb1mt.js","/chat-static/_next/static/immutable/chunks/1p5y_zcqvqq8d.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/258a4ne6m_k4p.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/1nyef2mn0xr6l.js","/chat-static/_next/static/immutable/chunks/0zhl8lkpuievb.js","/chat-static/_next/static/immutable/chunks/300wx85v17r4x.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/0ewqarb2bfu8h.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/0hzhjtks438-t.js","/chat-static/_next/static/immutable/chunks/1vocqkm3a_1im.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/026zgw65c3ahb.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/3srf9h7msbpj9.js","/chat-static/_next/static/immutable/chunks/109o97wf-h9dp.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/0-vsrzeceac3v.js","/chat-static/_next/static/immutable/chunks/1np-j802-sgrx.js","/chat-static/_next/static/immutable/chunks/2owpwowxho3m_.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/0b4i3dpg7a-jn.js","/chat-static/_next/static/immutable/chunks/29yrv11tyt1vu.js","/chat-static/_next/static/immutable/chunks/3sn4vx261dox0.js","/chat-static/_next/static/immutable/chunks/0nx1v2xq-1q6f.js","/chat-static/_next/static/immutable/chunks/11jpx637g96mg.js","/chat-static/_next/static/immutable/chunks/3cyqm8u9n5jqw.js","/chat-static/_next/static/immutable/chunks/2t6e3v_r3gzl3.js","/chat-static/_next/static/immutable/chunks/0egykxuezct38.js"],"SWRDataProvider"] 85:T4272,[V0_FILE]typescriptreact:file="form-manager.tsx" isEdit="true" isMerged="true" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { useToast } from "@/components/ui/use-toast" import PageEditor from "./page-editor" import type { Page } from "./types" import { initialPages } from "./initial-config" export default function FormManager() { const [pages, setPages] = useState(initialPages) const [currentPageIndex, setCurrentPageIndex] = useState(0) const { toast } = useToast() const addPage = () => { setPages([ ...pages, { data: { heading: "New Page", subheading: "", button: "Next" }, questions: [], }, ]) setCurrentPageIndex(pages.length) } const updatePage = (updatedPage: Page) => { const newPages = [...pages] newPages[currentPageIndex] = updatedPage setPages(newPages) } const deletePage = () => { if (pages.length > 1) { const newPages = pages.filter((_, i) => i !== currentPageIndex) setPages(newPages) setCurrentPageIndex(Math.min(currentPageIndex, newPages.length - 1)) } } const exportConfig = () => { const config = JSON.stringify(pages, null, 2) const script = `` navigator.clipboard.writeText(script).then(() => { toast({ title: "Configuration Exported", description: "The form configuration has been copied to your clipboard.", }) }) } return (

Multi-Step Form Manager

) } [V0_FILE]typescriptreact:file="page-editor.tsx" isEdit="true" isMerged="true" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import QuestionEditor from "./question-editor" import type { Page, Question } from "./types" interface PageEditorProps { page: Page onUpdate: (updatedPage: Page) => void onDelete: () => void } export default function PageEditor({ page, onUpdate, onDelete }: PageEditorProps) { const updatePageData = (field: keyof Page["data"], value: string) => { onUpdate({ ...page, data: { ...page.data, [field]: value }, }) } const addQuestion = () => { onUpdate({ ...page, questions: [ ...page.questions, { id: `question-${Date.now()}`, question: "New Question", type: "text", required: false, }, ], }) } const updateQuestion = (index: number, updatedQuestion: Question) => { const newQuestions = [...page.questions] newQuestions[index] = updatedQuestion onUpdate({ ...page, questions: newQuestions }) } const deleteQuestion = (index: number) => { onUpdate({ ...page, questions: page.questions.filter((_, i) => i !== index), }) } return (

Heading updatePageData("heading", e.target.value)} />

Subheading updatePageData("subheading", e.target.value)} />

Button Text updatePageData("button", e.target.value)} />

Questions

{page.questions.map((question, index) => ( updateQuestion(index, updatedQuestion)} onDelete={() => deleteQuestion(index)} /> ))}

) } [V0_FILE]typescriptreact:file="providers.tsx" isMerged="true" import type React from "react" import { ToastProvider } from "@/components/ui/toast" interface ProvidersProps { children: React.ReactNode } export function Providers({ children }: ProvidersProps) { return {children} } [V0_FILE]typescriptreact:file="app.tsx" isMerged="true" import { Providers } from "./providers" import FormManager from "./form-manager" export default function App() { return ( ) } [V0_FILE]typescript:file="types.ts" isEdit="true" export interface Option { label: string value: string } export interface Question { id: string question: string type: "text" | "email" | "tel" | "select" | "multiselect" | "checkbox" | "textarea" required: boolean options?: Option[] } export interface Page { data: { heading: string subheading: string button: string } questions: Question[] } [V0_FILE]typescriptreact:file="question-editor.tsx" isEdit="true" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Switch } from "@/components/ui/switch" import type { Question, Option } from "./types" interface QuestionEditorProps { question: Question onUpdate: (updatedQuestion: Question) => void onDelete: () => void } export default function QuestionEditor({ question, onUpdate, onDelete }: QuestionEditorProps) { const [newOptionLabel, setNewOptionLabel] = useState("") const [newOptionValue, setNewOptionValue] = useState("") const updateField = (field: keyof Question, value: string | boolean) => { onUpdate({ ...question, [field]: value }) } const addOption = () => { if (newOptionLabel && newOptionValue) { const newOption: Option = { label: newOptionLabel, value: newOptionValue } const updatedOptions = [...(question.options || []), newOption] onUpdate({ ...question, options: updatedOptions }) setNewOptionLabel("") setNewOptionValue("") } } const removeOption = (index: number) => { const updatedOptions = question.options?.filter((_, i) => i !== index) onUpdate({ ...question, options: updatedOptions }) } const showOptions = question.type === "select" || question.type === "multiselect" return (

Question updateField("question", e.target.value)} />

Type

updateField("required", checked)} /> Required

{showOptions && (

Options

{question.options?.map((option, index) => (

))}

setNewOptionLabel(e.target.value)} /> setNewOptionValue(e.target.value)} />

)} ) } [V0_FILE]typescript:file="initial-config.ts" isFixed="true" isEdit="true" isQuickEdit="true" import type { Page } from "./types" export const initialPages: Page[] = [ // Page 1: Personal Information { data: { heading: "Contact Havelock Wool", subheading: "Tell us about yourself.", button: "Next", }, questions: [ { id: "firstname-409cc67b-ba66-4c70-99ed-206a1668305f", question: "First Name", type: "text", required: true, }, { id: "lastname-409cc67b-ba66-4c70-99ed-206a1668305f", question: "Last Name", type: "text", required: true, }, { id: "email-409cc67b-ba66-4c70-99ed-206a1668305f", question: "Email", type: "email", required: true, }, { id: "phone-409cc67b-ba66-4c70-99ed-206a1668305f", question: "Phone Number", type: "tel", required: true, }, ], }, // Page 2: Project Details { data: { heading: "Project Details", subheading: "Tell us about your project.", button: "Next", }, questions: [ { id: "type_of_project-409cc67b-ba66-4c70-99ed-206a1668305f", question: "I am a...", type: "select", required: true, options: [ { label: "Homeowner", value: "Residential" }, { label: "Builder", value: "Builder" }, { label: "Installer", value: "Installer" }, { label: "Sound panel", value: "sound panel distributor" }, { label: "Duct Wrap", value: "duct distributor" }, { label: "#vanlifer", value: "#vanlife" }, ], }, { id: "i_am_building_a___-409cc67b-ba66-4c70-99ed-206a1668305f", question: "I am building a...", type: "select", required: true, options: [ { label: "New house", value: "New house" }, { label: "Renovation project", value: "Renovation project" }, { label: "ADU", value: "ADU" }, { label: "Tinyhouse", value: "Tinyhouse" }, { label: "Shed / Hut", value: "Shed / Hut" }, { label: "Barn", value: "Barn" }, { label: "Attic/Crawl House", value: "Attic/Crawl House" }, { label: "Others (Please explain in the message section)", value: "Others" }, ], }, { id: "what_is_your_budget_-409cc67b-ba66-4c70-99ed-206a1668305f", question: "What are your expected insulation costs?", type: "select", required: true, options: [ { label: "Under $1,000", value: "Under $1,000" }, { label: "$1,000-$5,000", value: "$1,000-$5,000" }, { label: "$5,000-$10,000", value: "$5,000-$10,000" }, { label: "$10,000+", value: "$10,000+" }, ], }, { id: "expected_project_date_-409cc67b-ba66-4c70-99ed-206a1668305f", question: "Expected Project Date:", type: "select", required: true, options: [ { label: "I am desperate for sustainable, high-performance insulation now", value: "I am desperate for sustainable, high-performance insulation now", }, { label: "New construction in progress", value: "New construction in progress" }, { label: "Renovation in progress", value: "Renovation in progress" }, { label: "Project planning work to begin in the next 3 months", value: "Project planning work to begin in the next 3 months", }, { label: "Unsure when construction will start", value: "Unsure when construction will start" }, ], }, ], }, // Page 3: Installation Details { data: { heading: "Installation Details", subheading: "Tell us about your installation plans.", button: "Next", }, questions: [ { id: "who_will_be_installing_-409cc67b-ba66-4c70-99ed-206a1668305f", question: "Who will be installing? (if a residential project)", type: "select", required: true, options: [ { label: "I will!", value: "I will!" }, { label: "Professional", value: "Professional" }, { label: "Handywoman / Handyman", value: "Handywoman / Handyman" }, { label: "I don't know", value: "I don't know" }, ], }, { id: "zip-409cc67b-ba66-4c70-99ed-206a1668305f", question: "Project Postal Code", type: "text", required: true, }, { id: "country-409cc67b-ba66-4c70-99ed-206a1668305f", question: "Country/Region", type: "text", required: true, }, ], }, // Page 4: Additional Information { data: { heading: "Additional Information", subheading: "Any extra details?", button: "Submit", }, questions: [ { id: "where_did_you_hear_about_us_-409cc67b-ba66-4c70-99ed-206a1668305f", question: "Where did you hear about us?", type: "select", required: true, options: [ { label: "News Article", value: "PR Article" }, { label: "Google", value: "Google" }, { label: "Facebook", value: "Facebook" }, { label: "Instagram", value: "Instagram" }, { label: "YouTube", value: "YouTube" }, { label: "Word of Mouth", value: "Word of Mouth" }, { label: "Other", value: "Other" }, ], }, { id: "have_you_already_purchased_from_us_-409cc67b-ba66-4c70-99ed-206a1668305f", question: "Have you already purchased from us?", type: "select", required: true, options: [ { label: "Yes", value: "Yes" }, { label: "No", value: "No" }, ], }, { id: "message_cloned_-409cc67b-ba66-4c70-99ed-206a1668305f", question: "Message", type: "textarea", required: false, }, ], }, ] 7b:["$","$L83",null,{"chatId":"Y7e6IYKCmGU","children":["$","$L84",null,{"data":{"@\"active-block\",\"Y7e6IYKCmGU\",":{"id":"b_z0kXPrzVNRp","messageId":"5F28jAsKA6sD1YgTVes0Z2vtzIpadnzw","source":"$85","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"form-manager","type":"code-project","project":"form-manager"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"Y7e6IYKCmGU\",":false,"":null},"children":"$L86"}]}]

About

Tags

Share

About

Tags

Share

More from 0-quantumtech

More Templates Like This