37 lines
975 B
TypeScript
37 lines
975 B
TypeScript
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>
|
|
)}
|
|
/>
|
|
)
|
|
)
|