waitlist-form

1"use client";
2 
3import { useForm, Controller } 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 { toast } from "sonner";
11import {
12  Select,
13  SelectContent,
14  SelectItem,
15  SelectTrigger,
16  SelectValue,
17} from "@/components/ui/select";
18 
19const formSchema = z.object({
20  name: z.string().optional().or(z.literal("")),
21  email: z.string().email("Invalid email address").min(1, "Email Address is required"),
22  referralSource: z.enum(["twitter", "linkedin", "friend", "other"]).optional(),
23});
24 
25type FormValues = z.infer<typeof formSchema>;
26export function WaitlistSignupForm() {
27  const form = useForm<FormValues>({
28    resolver: zodResolver(formSchema),
29    defaultValues: {
30      name: "",
31      email: "",
32      referralSource: "twitter",
33    },
34  });
35 
36  const onSubmit = async (data: FormValues) => {
37    console.log("Form submitted:", data);
38    toast.success("Form submitted successfully!");
39  };
40 
41  return (
42    <Card className="w-full max-w-md mx-auto">
43      <CardHeader>
44        <CardTitle>Waitlist Signup</CardTitle>
45        <CardDescription>Join the waitlist for early access</CardDescription>
46      </CardHeader>
47      <CardContent>
48        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
49          <div className="space-y-2">
50            <Label htmlFor="name">Name (Optional)</Label>
51            <Input
52              id="name"
53              type="text"
54              placeholder="Your Name"
55              {...form.register("name")}
56            />
57            {form.formState.errors.name && (
58            <p className="text-sm text-destructive">{form.formState.errors.name.message}</p>
59          )}
60          </div>
61 
62          <div className="space-y-2">
63            <Label htmlFor="email">Email Address</Label>
64            <Input
65              id="email"
66              type="email"
67              placeholder="you@example.com"
68              {...form.register("email")}
69            />
70            {form.formState.errors.email && (
71            <p className="text-sm text-destructive">{form.formState.errors.email.message}</p>
72          )}
73          </div>
74 
75          <div className="space-y-2">
76// … truncated