'use client' import { useState } from 'react' import { Check, ChevronRight, ChevronLeft, Loader2 } from 'lucide-react' export function MultiStepForm() { const [currentStep, setCurrentStep] = useState(1) const [formData, setFormData] = useState({ firstName: '', lastName: '', email: '', phone: '', street: '', city: '', state: '', zipCode: '', username: '', password: '' }) const [isSubmitting, setIsSubmitting] = useState(false) const [isComplete, setIsComplete] = useState(false) const [showConfirmDialog, setShowConfirmDialog] = useState(false) const totalSteps = 4 const progress = ((currentStep - 1) / (totalSteps - 1)) * 100 const handleChange = (e) => { const { name, value } = e.target setFormData(prev => ({ ...prev, [name]: value })) } const handleNext = () => { setCurrentStep(prev => Math.min(prev + 1, totalSteps)) } const handlePrevious = () => { setCurrentStep(prev => Math.max(prev - 1, 1)) } const handleSubmit = async (e) => { e.preventDefault() setShowConfirmDialog(true) } const handleConfirmSubmit = async () => { setShowConfirmDialog(false) setIsSubmitting(true) try { // Simulate API call await new Promise(resolve => setTimeout(resolve, 1500)) setIsComplete(true) } catch (error) { console.error('Submission failed:', error) } finally { setIsSubmitting(false) } } const renderStep = () => { switch (currentStep) { case 1: return (

Tell us about yourself

Start with your personal information

First Name

Last Name

Phone

) case 2: return (

Where do you live?

Enter your address details

Street Address

City

State

ZIP Code

) case 3: return (

Create your account

Set up your login credentials

Username

Password

) case 4: return (

Review your information

Please verify everything looks correct

Personal Information

Full Name

{formData.firstName} {formData.lastName}

{formData.email}

Phone

{formData.phone}

Address

Street

{formData.street}

City

{formData.city}

State

{formData.state}

ZIP Code

{formData.zipCode}

Account

Username

{formData.username}

Password

••••••••

) } } if (isComplete) { return (

All done!

Thanks for signing up. Welcome aboard!

) } return (

{isComplete ? (

All done!

Thanks for signing up. Welcome aboard!

) : ( <> {/* Progress Steps */}

{[1, 2, 3, 4].map((step) => (

{step < currentStep ? : step}

))}

{/* Form */}

)} {/* Confirmation Dialog */} {showConfirmDialog && (

Submit Registration?

Please confirm that you want to complete your registration. This action cannot be undone.

)}

) } export default function MultiStepFormDemo() { return }

Advance Multi Step Form