45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
/* This example requires Tailwind CSS v2.0+ */
|
|
import { Fragment, ReactNode } from "react";
|
|
import { Popover, Transition } from "@headlessui/react";
|
|
import ChevronDownIcon from "../icons/ChevronDownIcon";
|
|
import { Button } from "../button";
|
|
|
|
interface Props {
|
|
title: string;
|
|
className?: string;
|
|
disabled?: boolean;
|
|
children: ReactNode;
|
|
}
|
|
export default function ButtonFlyout({ title, className, disabled, children }: Props) {
|
|
return (
|
|
<Popover className="relative">
|
|
{() => (
|
|
<>
|
|
<Popover.Button as={Button} type="button" variant="outline" disabled={disabled} className={className}>
|
|
<span className="inline-flex items-center space-x-2">
|
|
<span>{title}</span>
|
|
<ChevronDownIcon className="h-5 w-5 text-muted-foreground" />
|
|
</span>
|
|
</Popover.Button>
|
|
|
|
<Transition
|
|
as={Fragment}
|
|
enter="transition ease-out duration-200"
|
|
enterFrom="opacity-0 translate-y-1"
|
|
enterTo="opacity-100 translate-y-0"
|
|
leave="transition ease-in duration-150"
|
|
leaveFrom="opacity-100 translate-y-0"
|
|
leaveTo="opacity-0 translate-y-1"
|
|
>
|
|
<Popover.Panel className="absolute left-1/2 z-10 mt-3 w-screen max-w-xs -translate-x-1/2 transform px-2 sm:px-0">
|
|
<div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
|
|
<div className="bg-background relative grid gap-6 px-5 py-6 sm:gap-8 sm:p-8">{children}</div>
|
|
</div>
|
|
</Popover.Panel>
|
|
</Transition>
|
|
</>
|
|
)}
|
|
</Popover>
|
|
);
|
|
}
|