Resume
/
subman-nextjs
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add rudimentary popover for checkboxes

This commit is contained in:
andrzej 2024-06-14 22:44:13 +02:00
parent 5ad03054a9
commit d4d73750b3
1 changed files with 53 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
src/app/ui/forms/story.tsx
View File

@ -92,63 +92,59 @@ export default function StoryForm({ genres }) {
</FormItem> </FormItem>
)} )}
/> />
{ <Popover.Root>
// <Popover.Root> <Popover.Trigger>
// <Popover.Trigger> Genres
// Genres </Popover.Trigger>
// </Popover.Trigger> <Popover.Content>
// <Popover.Content> <FormField
} control={form.control}
<FormField name="genres"
control={form.control} render={() => (
name="genres" <FormItem>
render={() => ( <div className="mb-4">
<FormItem> <FormLabel>Genres</FormLabel>
<div className="mb-4"> <FormDescription>Specify relevant genres</FormDescription>
<FormLabel>Genres</FormLabel> </div>
<FormDescription>Specify relevant genres</FormDescription> {genres.map((item) => (
</div> <FormField
{genres.map((item) => ( key={item.id}
<FormField control={form.control}
key={item.id} name="genres"
control={form.control} render={({ field }) => {
name="genres" return (
render={({ field }) => { <FormItem
return ( key={item.id}
<FormItem className="flex flex-row items-start space-x-3 space-y-0"
key={item.id} >
className="flex flex-row items-start space-x-3 space-y-0" <FormControl>
> <Checkbox
<FormControl> checked={field.value?.includes(item.id)}
<Checkbox onCheckedChange={(checked) => {
checked={field.value?.includes(item.id)} return checked
onCheckedChange={(checked) => { ? field.onChange([...field.value, item.id])
return checked : field.onChange(
? field.onChange([...field.value, item.id]) field.value?.filter(
: field.onChange( (value) => value !== item.id
field.value?.filter( )
(value) => value !== item.id )
) }}
) />
}} </FormControl>
/> <FormLabel className="text-sm font-normal">
</FormControl> {item.name}
<FormLabel className="text-sm font-normal"> </FormLabel>
{item.name} </FormItem>
</FormLabel> )
</FormItem> }}
) />
}} ))}
/> <FormMessage />
))} </FormItem>
<FormMessage /> )}
</FormItem> />
)} </Popover.Content>
/> </Popover.Root>
{
// </Popover.Content>
// </Popover.Root>
}
<Button type="submit">Submit</Button> <Button type="submit">Submit</Button>
</form> </form>