event-registration-form

1"use client";
2 
3import { useForm } from "react-hook-form";
4import { zodResolver } from "@hookform/resolvers/zod";
5import * as z from "zod";
6import { Button } from "@/components/ui/button";
7import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
8import { Input } from "@/components/ui/input";
9import { Label } from "@/components/ui/label";
10import { Textarea } from "@/components/ui/textarea";
11import { toast } from "sonner";
12 
13const formSchema = z.object({
14  attendeeName: z.string().min(2, "Name is required"),
15  attendeeEmail: z.string().email("Invalid email"),
16  company: z.string().optional(),
17  dietaryRestrictions: z.string().optional(),
18});
19 
20type FormValues = z.infer<typeof formSchema>;
21 
22export function EventRegistrationForm() {
23  const form = useForm<FormValues>({
24    resolver: zodResolver(formSchema),
25    defaultValues: {
26      attendeeName: "",
27      attendeeEmail: "",
28      company: "",
29      dietaryRestrictions: "",
30    },
31  });
32 
33  const onSubmit = async (data: FormValues) => {
34    console.log("Form submitted:", data);
35    toast.success("Successfully registered for the event!");
36  };
37 
38  return (
39    <Card className="w-full max-w-2xl mx-auto">
40      <CardHeader>
41        <CardTitle>Event Registration</CardTitle>
42        <CardDescription>Register for our upcoming event</CardDescription>
43      </CardHeader>
44      <CardContent>
45        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
46          <div className="space-y-2">
47            <Label htmlFor="attendeeName">Full Name</Label>
48            <Input
49              id="attendeeName"
50              placeholder="John Smith"
51              {...form.register("attendeeName")}
52            />
53            {form.formState.errors.attendeeName && (
54              <p className="text-sm text-destructive">{form.formState.errors.attendeeName.message}</p>
55            )}
56          </div>
57          
58          <div className="space-y-2">
59            <Label htmlFor="attendeeEmail">Work Email</Label>
60            <Input
61              id="attendeeEmail"
62              type="email"
63              placeholder="john@company.com"
64              {...form.register("attendeeEmail")}
65            />
66            {form.formState.errors.attendeeEmail && (
67              <p className="text-sm text-destructive">{form.formState.errors.attendeeEmail.message}</p>
68            )}
69          </div>
70          
71          <div className="space-y-2">
72// … truncated