extrapolate genre picker

src/app/ui/forms/genreCheckboxes.tsx

@@ -1,17 +0,0 @@
-import { getGenres } from "app/lib/get"
-import React from "react"
-import { letterCase } from "app/lib/functions"
-export default async function GenreCheckboxes() {
-
-	const genres = await getGenres()
-	const genreCheckboxes = genres.map(e => {
-		const label = letterCase(e.name)
-		return (<React.Fragment key={`fragment${e.name}`}>
-			<input type="checkbox" id={e.name} key={`genreCheckboxInput${e.id}`} />
-			<label htmlFor={e.name} key={`genreCheckboxLabel${e.id}`}>{label}</label>
-		</React.Fragment>
-		)
-	})
-	return <>{genreCheckboxes}</>
-
-}

src/app/ui/forms/genreComboBox.tsx

@@ -1 +0,0 @@
-

src/app/ui/forms/genrePicker.tsx

@@ -0,0 +1,62 @@
+import { FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+import GenreCheckbox from "./genreCheckbox"
+
+export default function GenrePicker({ genres, form }) {
+	return (
+		<FormField
+			control={form.control}
+			name="genres"
+			render={({ field }) => (
+				<FormItem className="flex flex-col">
+					<FormLabel className="h-5">Genres</FormLabel>
+					<Popover modal={true}>
+						<PopoverTrigger asChild>
+							<Button
+								variant={"outline"}
+								className={cn(
+									"min-w-fit max-w-full w-fit pl-3 text-left font-normal flex-wrap gap-y-1 h-fit min-h-10",
+									!field.value && "text-muted-foreground"
+								)}
+							>
+								{field.value.length !== 0 ? (
+									field.value.map((e, i) => (<Badge>{genres.find(f => e === f.id).name}</Badge>))
+								) : (
+									<p>Select</p>
+								)}
+							</Button>
+						</PopoverTrigger>
+
+
+
+						<PopoverContent align="start">
+							{genres.map((item) => (
+								<FormField
+
+									key={item.id}
+									control={form.control}
+									name="genres"
+									render={({ field }) => {
+										return (
+											<GenreCheckbox field={field} item={item} />
+										)
+									}}
+								/>
+							))}
+							<Button variant="link" className="p-0" onClick={() => form.setValue("genres", [])}>Clear</Button>
+						</PopoverContent>
+					</Popover>
+					<FormMessage />
+				</FormItem>
+			)}
+		/>
+	)
+}
+
+
+
+
+

src/app/ui/forms/genresTrigger.tsx

@@ -1,27 +0,0 @@
-import { FormField, FormItem, FormLabel, FormControl } from "@/components/ui/form"
-import { Popover, PopoverContent, PopoverTrigger } from "@radix-ui/react-popover"
-import { Checkbox } from "@radix-ui/react-checkbox"
-import { Button } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
-import { Badge } from "@/components/ui/badge"
-export default function GenresTrigger({ value, genres }) {
-	return (
-		<>
-			<PopoverTrigger asChild>
-				<Button
-					variant={"outline"}
-					className={cn(
-						"min-w-fit max-w-full w-fit pl-3 text-left font-normal flex-wrap gap-y-1 h-fit min-h-10",
-						!value && "text-muted-foreground"
-					)}
-				>
-					{value.length !== 0 ? (
-						value.map((e, i) => (<Badge>{genres.find(f => e === f.id).name}</Badge>))
-					) : (
-						<p>Select</p>
-					)}
-				</Button>
-			</PopoverTrigger>
-		</>
-	)
-}