1"use client";
2
3import { useForm } from "react-hook-form";
4import {
5  Form,
6  FormField,
7  FormItem,
8  FormLabel,
9  FormControl,
10  FormDescription,
11  FormMessage,
12} from "@repo/ui/components/form";
13import { Input } from "@repo/ui/components/input";
14import { Button } from "@repo/ui/components/button";
15import { z } from "zod";
16import { zodResolver } from "@hookform/resolvers/zod";
17import { Textarea } from "@repo/ui/components/textarea";

1type FormSchema = z.infer<typeof formSchema>;
2
3const formSchema = z.object({
4  name: z
5    .string({ message: "Name require" })
6    .min(1, { message: "Name min 1 character" }),
7  description: z.string().optional(),
8});
9
10const form = useForm<FormSchema>({
11  defaultValues: { name: "", description: "" },
12  resolver: zodResolver(formSchema),
13});
14
15const onSubmit = (data: FormSchema) => {
16  console.log(data);
17};
18
19<Form {...form}>
20  <form
21    onSubmit={form.handleSubmit(onSubmit)}
22    className="flex flex-col gap-y-4 w-full"
23  >
24    <FormField
25      control={form.control}
26      name="name"
27      render={({ field }) => (
28        <FormItem>
29          <FormLabel>Name</FormLabel>
30          <FormControl>
31            <Input {...field} type="text" placeholder="Enter your name" />
32          </FormControl>
33          <FormDescription>This is your name</FormDescription>
34          <FormMessage />
35        </FormItem>
36      )}
37    />
38
39    <FormField
40      control={form.control}
41      name="description"
42      render={({ field }) => (
43        <FormItem>
44          <FormLabel>Description</FormLabel>
45          <FormControl>
46            <Textarea {...field} placeholder="Enter your description" />
47          </FormControl>
48          <FormDescription>This is your description</FormDescription>
49          <FormMessage />
50        </FormItem>
51      )}
52    />
53
54    <Button type="submit">Submit</Button>
55  </form>
56</Form>