add fully abstracted genrePicker

src/app/ui/forms/genrePicker.tsx

@@ -0,0 +1,72 @@
+"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,8 +26,9 @@ 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),
@@ -45,6 +46,7 @@ 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.
@@ -110,26 +112,7 @@ export default function StoryForm({ genres }) {
 					control={form.control}
 					name="genres"
 					render={({ field }) => (
-						<FormItem className="flex flex-col">
+						<GenrePicker genres={genres} value={field.value} form={form} ref={ref} />
-							<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>
 					)}
 				/>