63 lines
1.6 KiB
TypeScript
63 lines
1.6 KiB
TypeScript
|
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>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|