From fff436f87c51afbbf12c78837918d3f445b65999 Mon Sep 17 00:00:00 2001
From: andrzej <andrzejjamesstepien@gmail.com>
Date: Mon, 17 Jun 2024 22:56:24 +0200
Subject: [PATCH] extracted genre picker experiment

I need to properly handle refs for this to work, but this may be more trouble than it's worth
---
 src/app/ui/forms/genrePicker.tsx | 36 ++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 src/app/ui/forms/genrePicker.tsx

diff --git a/src/app/ui/forms/genrePicker.tsx b/src/app/ui/forms/genrePicker.tsx
new file mode 100644
index 0000000..4c071c6
--- /dev/null
+++ b/src/app/ui/forms/genrePicker.tsx
@@ -0,0 +1,36 @@
+import { forwardRef } from "react";
+import { FormField, FormItem, FormMessage } from "@/components/ui/form";
+import { Popover, PopoverContent, PopoverPortal, PopoverTrigger } from "@radix-ui/react-popover";
+import GenresTrigger from "./genresTrigger";
+import GenreCheckbox from "./genreCheckbox";
+
+export const GenrePicker = forwardRef(
+	({ form, genres }, ref) => (
+		<FormField
+			control={form.control}
+			name="genres"
+			render={({ field }) => (
+				<FormItem className="flex flex-col">
+					<Popover>
+						<GenresTrigger value={field.value} genres={genres} />
+						<PopoverContent ref={ref}>
+							{genres.map((item) => (
+								<FormField
+									key={item.id}
+									control={form.control}
+									name="genres"
+									render={({ field }) => {
+										return (
+											<GenreCheckbox field={field} item={item} />
+										)
+									}}
+								/>
+							))}
+						</PopoverContent>
+					</Popover>
+					<FormMessage />
+				</FormItem>
+			)}
+		/>
+	)
+)