diff options
Diffstat (limited to 'src/components/input/MenuButton.tsx')
| -rw-r--r-- | src/components/input/MenuButton.tsx | 32 |
1 files changed, 32 insertions, 0 deletions
diff --git a/src/components/input/MenuButton.tsx b/src/components/input/MenuButton.tsx new file mode 100644 index 0000000..bac307f --- /dev/null +++ b/src/components/input/MenuButton.tsx @@ -0,0 +1,32 @@ +import { Button, DialogTrigger, Icon, Menu, Popover } from '@umami/react-zen'; +import type { Key, ReactNode } from 'react'; +import { Ellipsis } from '@/components/icons'; + +export function MenuButton({ + children, + onAction, + isDisabled, +}: { + children: ReactNode; + onAction?: (action: string) => void; + isDisabled?: boolean; +}) { + const handleAction = (key: Key) => { + onAction?.(key.toString()); + }; + + return ( + <DialogTrigger> + <Button variant="quiet" isDisabled={isDisabled}> + <Icon> + <Ellipsis /> + </Icon> + </Button> + <Popover placement="bottom start"> + <Menu aria-label="menu" onAction={handleAction} style={{ minWidth: '140px' }}> + {children} + </Menu> + </Popover> + </DialogTrigger> + ); +} |