Revert "add fully abstracted genrePicker"

This reverts commit 3a56b1f31e.

src/app/ui/forms/genrePicker.tsx

@@ -1,72 +0,0 @@
-"use client"
-import { FormField, FormItem, FormLabel, FormControl } from "@/components/ui/form"
-import { Popover, PopoverContent, PopoverPortal, PopoverTrigger } from "@radix-ui/react-popover"
-import { Checkbox } from "@radix-ui/react-checkbox"
-import { Button } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
-export default function GenrePicker({ genres, value, form, ref }) {
-
-	return (
-		<>
-			<FormItem className="flex flex-col">
-				<Popover>
-					<PopoverPortal container={ref}>
-						<PopoverTrigger asChild>
-							<Button
-								variant={"outline"}
-								className={cn(
-									"min-w-fit max-w-screen-sm w-fit pl-3 text-left font-normal",
-									!value && "text-muted-foreground"
-								)}
-							>
-								{value.length !== 0 ? (
-									value.map((e, i) => genres.find(f => e === f.id).name +
-										(i < value.length - 1 ? ', ' : ''))
-								) : (
-									<FormLabel>Genres</FormLabel>
-								)}
-							</Button>
-						</PopoverTrigger>
-						<PopoverContent>
-							{genres.map((item) => (
-								<FormField
-									key={item.id}
-									control={form.control}
-									name="genres"
-									render={({ field }) => {
-										return (
-											<FormItem
-												key={item.id}
-												className="flex flex-row items-start space-x-3 space-y-0"
-											>
-												<FormControl>
-													<Checkbox
-														checked={field.value?.includes(item.id)}
-														onCheckedChange={(checked) => {
-															return checked
-																? field.onChange([...field.value, item.id])
-																: field.onChange(
-																	field.value?.filter(
-																		(value) => value !== item.id
-																	)
-																)
-														}}
-													/>
-												</FormControl>
-												<FormLabel className="text-sm font-normal">
-													{item.name}
-												</FormLabel>
-											</FormItem>
-										)
-									}}
-								/>
-							))}
-						</PopoverContent>
-					</PopoverPortal>
-				</Popover>
-			</FormItem>
-
-		</>
-
-	)
-}

src/app/ui/forms/story.tsx

@@ -26,9 +26,8 @@ import {
 import { cn } from "@/lib/utils"
 import { Badge } from "lucide-react"
 import GenresTrigger from "./genresTrigger"
+import GenresPopoverContent from "./genresPopoverContent"
 import GenreCheckbox from "./genreCheckbox"
-import GenrePicker from "./genrePicker"
-import { useRef } from "react"
 
 const formSchema = z.object({
 	title: z.string().min(2).max(50),
@@ -46,7 +45,6 @@ export default function StoryForm({ genres }) {
 			genres: []
 		},
 	})
-	const ref = useRef(null)
 	// 2. Define a submit handler.
 	function onSubmit(values: z.infer<typeof formSchema>) {
 		// Do something with the form values.
@@ -112,7 +110,26 @@ export default function StoryForm({ genres }) {
 					control={form.control}
 					name="genres"
 					render={({ field }) => (
-						<GenrePicker genres={genres} value={field.value} form={form} ref={ref} />
+						<FormItem className="flex flex-col">
+							<Popover>
+								<GenresTrigger value={field.value} genres={genres} />
+								<PopoverContent>
+									{genres.map((item) => (
+										<FormField
+											key={item.id}
+											control={form.control}
+											name="genres"
+											render={({ field }) => {
+												return (
+													<GenreCheckbox field={field} item={item} />
+												)
+											}}
+										/>
+									))}
+								</PopoverContent>
+							</Popover>
+							<FormMessage />
+						</FormItem>
 					)}
 				/>