newsletter-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  email: z.string().email("Invalid email address").min(1, "Email Address is required"),
21  frequency: z.enum(["daily", "weekly", "monthly"]),
22});
23 
24type FormValues = z.infer<typeof formSchema>;
25export function NewsletterSignupForm() {
26  const form = useForm<FormValues>({
27    resolver: zodResolver(formSchema),
28    defaultValues: {
29      email: "",
30      frequency: "daily",
31    },
32  });
33 
34  const onSubmit = async (data: FormValues) => {
35    console.log("Form submitted:", data);
36    toast.success("Form submitted successfully!");
37  };
38 
39  return (
40    <Card className="w-full max-w-md mx-auto">
41      <CardHeader>
42        <CardTitle>Newsletter Signup</CardTitle>
43        <CardDescription>Simple newsletter subscription form</CardDescription>
44      </CardHeader>
45      <CardContent>
46        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
47          <div className="space-y-2">
48            <Label htmlFor="email">Email Address</Label>
49            <Input
50              id="email"
51              type="email"
52              placeholder="john@example.com"
53              {...form.register("email")}
54            />
55            {form.formState.errors.email && (
56            <p className="text-sm text-destructive">{form.formState.errors.email.message}</p>
57          )}
58          <p className="text-sm text-muted-foreground">We'll never share your email</p>
59          </div>
60 
61          <div className="space-y-2">
62            <Label htmlFor="frequency">Email Frequency</Label>
63            <Controller
64              control={form.control}
65              name="frequency"
66              render={({ field }) => (
67                <Select onValueChange={field.onChange} defaultValue={field.value}>
68                  <SelectTrigger id="frequency">
69                    <SelectValue placeholder="Select an option" />
70                  </SelectTrigger>
71                  <SelectContent>
72// … truncated