"use client" import { z } from "zod" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import { Genre } from "@prisma/client" import { Button } from "@/components/ui/button" import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { Checkbox } from "@/components/ui/checkbox" import { toast } from "@/components/ui/use-toast" import * as Popover from '@radix-ui/react-popover'; const formSchema = z.object({ title: z.string().min(2).max(50), word_count: z.coerce.number(), genres: z.array(z.number()) }) export default function StoryForm({ genres }) { // 1. Define your form. const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: { title: "", word_count: 0, genres: [] }, }) // 2. Define a submit handler. function onSubmit(values: z.infer) { // Do something with the form values. // ✅ This will be type-safe and validated. toast({ title: "You submitted the following values:", description: (
					{JSON.stringify(values, null, 2)}
				
), }) console.log(values) } function onErrors(errors) { toast({ title: "You have errors", description: (
					{JSON.stringify(errors, null, 2)}
				
), }) console.log(JSON.stringify(errors)) } return (
( Title )} /> ( Word count )} /> { // // // Genres // // } (
Genres Specify relevant genres
{genres.map((item) => ( { return ( { return checked ? field.onChange([...field.value, item.id]) : field.onChange( field.value?.filter( (value) => value !== item.id ) ) }} /> {item.name} ) }} /> ))}
)} /> { //
//
} ) }