Multi-step form

1'use client'
2import type { VariantProps } from 'class-variance-authority'
3import { AnimatePresence, type MotionProps, motion } from 'motion/react'
4import * as React from 'react'
5import { Button, type buttonVariants } from '@/components/ui/button'
6import {
7	Stepper,
8	StepperIndicator,
9	StepperItem,
10	StepperSeparator,
11	StepperTrigger,
12} from '@/components/ui/stepper'
13import { useMultiStepForm } from '@/hooks/use-multi-step-viewer'
14
15const NextButton = (
16	props: React.ComponentProps<'button'> &
17		VariantProps<typeof buttonVariants> & {
18			asChild?: boolean
19		},
20) => {
21	const { isLastStep, goToNext } = useMultiStepForm()
22	if (isLastStep) return null
23	return (
24		<Button size="sm" type="button" onClick={() => goToNext()} {...props} />
25	)
26}
27
28const PreviousButton = (
29	props: React.ComponentProps<'button'> &
30		VariantProps<typeof buttonVariants> & {
31			asChild?: boolean
32		},
33) => {
34	const { isFirstStep, goToPrevious } = useMultiStepForm()
35	if (isFirstStep) return null
36	return (
37		<Button
38			size="sm"
39			type="button"
40			variant="outline"
41			onClick={() => goToPrevious()}
42			{...props}
43		/>
44	)
45}
46
47const SubmitButton = (
48	props: React.ComponentProps<'button'> &
49		VariantProps<typeof buttonVariants> & {
50			asChild?: boolean
51		},
52) => {
53	const { isLastStep } = useMultiStepForm()
54	if (!isLastStep) return null
55	return <Button size="sm" type="button" {...props} />
56}
57
58const ResetButton = (
59	props: React.ComponentProps<'button'> &
60		VariantProps<typeof buttonVariants> & {
61			asChild?: boolean
62		},
63) => {
64	return <Button size="sm" type="button" variant="ghost" {...props} />
65}
66
67const FormHeader = (props: React.ComponentProps<'div'>) => {
68	const { currentStepIndex, steps } = useMultiStepForm()
69	return (
70		<div
71			className="flex flex-col items-start justify-center gap-1 pb-4"
72			{...props}
73		>
74			<Stepper value={currentStepIndex} orientation="horizontal">
75				{steps.map((_, index) => {
76					const stepNumber = index + 1
77					const isLast = stepNumber === steps.length
78					return (
79						<StepperItem
80							key={stepNumber}
81							step={stepNumber}
82							className="not-last:flex-1"
83						>
84							<StepperTrigger>
85								<StepperIndicator />
86							</StepperTrigger>
87							{!isLast && <StepperSeparator />}
88						</StepperItem>
89					)
90				})}
91			</Stepper>
92		</div>
93	)
94}
95const FormFooter = (props: React.ComponentProps<'div'>) => {
96	return (
97		<div
98// … truncated