"use client" import { z } from "zod" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" 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 { toast } from "@/components/ui/use-toast" import { Popover, PopoverContent, } from "@/components/ui/popover" import GenresTrigger from "./genresTrigger" import GenreCheckbox from "./genreCheckbox" import { useRef, useImperativeHandle, ComponentProps } from "react" import { Genre } from "@prisma/client" import { randomStoryTitle } from "app/lib/shortStoryTitleGenerator" const formSchema = z.object({ title: z.string().min(2).max(50), word_count: z.coerce.number().min(100), genres: z.array(z.number()) }) export default function StoryForm({ genres, createStory, className }: ComponentProps<"div"> & { genres: Array, createStory: (data: any) => void }) { // 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)}
				
), }) createStory(values) console.log(values) } function onErrors(errors) { toast({ title: "You have errors", description: (
					{JSON.stringify(errors, null, 2)}
				
), }) console.log(JSON.stringify(errors)) } const genrePickerRef = useRef(null) const { ref, ...rest } = form.register("genres") useImperativeHandle(ref, () => genrePickerRef.current) return (
( Title )} />
( Genres {genres.map((item) => ( { return ( ) }} /> ))} )} /> ( Word count )} />
) }