Files
umami/src/components/input/MenuButton.tsx
T

33 lines
778 B
TypeScript

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>
);
}