70 lines
3.0 KiB
TypeScript
70 lines
3.0 KiB
TypeScript
import { Fragment, MouseEventHandler, ReactNode } from "react";
|
|
import { Menu, Transition } from "@headlessui/react";
|
|
import clsx from "clsx";
|
|
import { Link } from "react-router";
|
|
import { ChevronDownIcon } from "~/components/ui/icons/vendor";
|
|
|
|
interface Props {
|
|
right?: boolean;
|
|
button?: ReactNode;
|
|
to?: string;
|
|
options?: ReactNode;
|
|
children?: ReactNode;
|
|
className?: string;
|
|
onClick?: MouseEventHandler<HTMLButtonElement>;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export default function DropdownWithClick({ button, to, options, right, onClick, className, disabled }: Props) {
|
|
return (
|
|
<span className={clsx(className, "relative z-10 inline-flex rounded-md shadow-2xs")}>
|
|
{to ? (
|
|
<Link
|
|
to={to}
|
|
className={clsx(
|
|
"focus:border-brand-brand-border-solid-default shadow-focus border-border-default bg-surface-neutral-primary text-text-neutral-secondary relative -mr-1 inline-flex items-center rounded-l-md border px-4 py-2 text-sm font-medium focus:z-10 focus:outline-hidden",
|
|
disabled ? "cursor-not-allowed opacity-80" : "hover:bg-surface-neutral-secondary focus:bg-surface-neutral-secondary"
|
|
)}
|
|
>
|
|
{button}
|
|
</Link>
|
|
) : (
|
|
<button
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
type="button"
|
|
className={clsx(
|
|
"focus:border-brand-brand-border-solid-default shadow-focus border-border-default bg-surface-neutral-primary text-text-neutral-secondary relative -mr-1 inline-flex items-center rounded-l-md border px-4 py-2 text-sm font-medium focus:z-10 focus:outline-hidden",
|
|
disabled ? "cursor-not-allowed opacity-80" : "hover:bg-surface-neutral-secondary focus:bg-surface-neutral-secondary"
|
|
)}
|
|
>
|
|
{button}
|
|
</button>
|
|
)}
|
|
<Menu as="span" className="relative -ml-px block">
|
|
<Menu.Button className="hover:bg-surface-neutral-secondary focus:border-brand-brand-border-solid-default shadow-focus border-border-default text-text-neutral-tertiary bg-surface-neutral-primary relative inline-flex items-center rounded-r-md border px-2 py-2 text-sm font-medium focus:z-10 focus:outline-hidden">
|
|
<ChevronDownIcon className="h-5 w-5" />
|
|
</Menu.Button>
|
|
<Transition
|
|
as={Fragment}
|
|
enter="transition ease-out duration-100"
|
|
enterFrom="transform opacity-0 scale-95"
|
|
enterTo="transform opacity-100 scale-100"
|
|
leave="transition ease-in duration-75"
|
|
leaveFrom="transform opacity-100 scale-100"
|
|
leaveTo="transform opacity-0 scale-95"
|
|
>
|
|
<Menu.Items
|
|
className={clsx(
|
|
"bg-surface-neutral-modal absolute z-40 mt-2 w-48 rounded-md shadow-lg ring-1 ring-border-default focus:outline-hidden",
|
|
right ? "left-0 origin-top-left" : "right-0 origin-top-right"
|
|
)}
|
|
>
|
|
<div className="py-1">{options}</div>
|
|
</Menu.Items>
|
|
</Transition>
|
|
</Menu>
|
|
</span>
|
|
);
|
|
}
|