"use client" import * as React from "react" import { Card, CardTitle, CardHeader, CardDescription, CardContent, CardFooter, } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { z } from "zod" const exampleFormSchema = z.object({ name: z.string().min(1), email: z.string().email(), message: z.string().min(1), }) export function ExampleForm() { const [pending, setPending] = React.useState(false) const [state, setState] = React.useState({ defaultValues: { name: "", email: "", message: "", }, success: false, errors: { name: "", email: "", message: "", }, }) const handleSubmit = React.useCallback( (e: React.FormEvent) => { e.preventDefault() setPending(true) const formData = new FormData(e.target as HTMLFormElement) const data = Object.fromEntries(formData.entries()) const result = exampleFormSchema.safeParse(data) if (!result.success) { setState({ ...state, errors: Object.fromEntries( Object.entries(result.error.flatten().fieldErrors).map( ([key, value]) => [key, value?.[0] ?? ""] ) ) as Record, }) setPending(false) return } setPending(false) }, [state] ) return ( How can we help? Need help with your project? We're here to assist you.

Name {state.errors?.name && (

{state.errors.name}

)}

Email {state.errors?.email && (

{state.errors.email}

)}

Message

Example Form