feedback-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 { Textarea } from "@/components/ui/textarea";
12import { Checkbox } from "@/components/ui/checkbox";
13 
14const formSchema = z.object({
15  name: z.string().optional().or(z.literal("")),
16  email: z.string().email("Invalid email address").optional().or(z.literal("")),
17  feedback: z.string().min(1, "Your Feedback is required"),
18  contactPermission: z.boolean(),
19});
20 
21type FormValues = z.infer<typeof formSchema>;
22export function ProductFeedbackForm() {
23  const form = useForm<FormValues>({
24    resolver: zodResolver(formSchema),
25    defaultValues: {
26      name: "",
27      email: "",
28      feedback: "",
29      contactPermission: false,
30    },
31  });
32 
33  const onSubmit = async (data: FormValues) => {
34    console.log("Form submitted:", data);
35    toast.success("Form submitted successfully!");
36  };
37 
38  return (
39    <Card className="w-full max-w-md mx-auto">
40      <CardHeader>
41        <CardTitle>Product Feedback</CardTitle>
42        <CardDescription>Collect user feedback and suggestions</CardDescription>
43      </CardHeader>
44      <CardContent>
45        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
46          <div className="space-y-2">
47            <Label htmlFor="name">Name (Optional)</Label>
48            <Input
49              id="name"
50              type="text"
51              placeholder="Your name"
52              {...form.register("name")}
53            />
54            {form.formState.errors.name && (
55            <p className="text-sm text-destructive">{form.formState.errors.name.message}</p>
56          )}
57          </div>
58 
59          <div className="space-y-2">
60            <Label htmlFor="email">Email (Optional)</Label>
61            <Input
62              id="email"
63              type="email"
64              placeholder="your@email.com"
65              {...form.register("email")}
66            />
67            {form.formState.errors.email && (
68            <p className="text-sm text-destructive">{form.formState.errors.email.message}</p>
69          )}
70          </div>
71 
72          <div className="space-y-2">
73// … truncated