56 lines
2.0 KiB
TypeScript
56 lines
2.0 KiB
TypeScript
|
import { Popover } from '@headlessui/react'
|
||
|
|
import { ActionButton, ActionButtonProps } from './ActionButton'
|
||
|
|
|
||
|
|
type ActionButtonSplitProps = Omit<ActionButtonProps, 'iconEnd'> & {
|
||
|
|
splitMenuItems: {
|
||
|
|
label: string
|
||
|
|
shortcut?: string
|
||
|
|
onClick: () => void
|
||
|
|
disabled?: boolean
|
||
|
|
}[]
|
||
|
|
}
|
||
|
|
|
||
|
|
export function ActionButtonDropdown({
|
||
|
|
splitMenuItems,
|
||
|
|
className,
|
||
|
|
...props
|
||
|
|
}: ActionButtonSplitProps) {
|
||
|
|
return (
|
||
|
|
<Popover className="relative">
|
||
|
|
<Popover.Button
|
||
|
|
as={ActionButton}
|
||
|
|
className={className}
|
||
|
|
{...props}
|
||
|
|
Element="button"
|
||
|
|
iconEnd={{
|
||
|
|
icon: 'caretDown',
|
||
|
|
className: 'ui-open:rotate-180',
|
||
|
|
bgClassName:
|
||
|
|
'bg-chalkboard-20 dark:bg-chalkboard-80 ui-open:bg-primary ui-open:text-chalkboard-10',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<Popover.Panel
|
||
|
|
as="ul"
|
||
|
|
className="absolute z-20 left-1/2 -translate-x-1/2 top-full mt-1 w-fit max-h-[80vh] overflow-y-auto py-2 flex flex-col gap-1 align-stretch text-inherit dark:text-chalkboard-10 bg-chalkboard-10 dark:bg-chalkboard-100 rounded shadow-lg border border-solid border-chalkboard-30 dark:border-chalkboard-80 text-sm m-0 p-0"
|
||
|
|
>
|
||
|
|
{splitMenuItems.map((item) => (
|
||
|
|
<li className="contents" key={item.label}>
|
||
|
|
<button
|
||
|
|
onClick={item.onClick}
|
||
|
|
className="block px-3 py-1 hover:bg-primary/10 dark:hover:bg-chalkboard-80 border-0 m-0 text-sm w-full rounded-none text-left disabled:!bg-transparent dark:disabled:text-chalkboard-60"
|
||
|
|
disabled={item.disabled}
|
||
|
|
>
|
||
|
|
<span className="capitalize">{item.label}</span>
|
||
|
|
{item.shortcut && (
|
||
|
|
<kbd className="bg-primary/10 dark:bg-chalkboard-80 dark:group-hover:bg-primary font-mono rounded-sm dark:text-inherit inline-block px-1 border-primary dark:border-chalkboard-90">
|
||
|
|
{item.shortcut}
|
||
|
|
</kbd>
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</Popover.Panel>
|
||
|
|
</Popover>
|
||
|
|
)
|
||
|
|
}
|