Spaces:
Runtime error
Runtime error
File size: 2,061 Bytes
cd6f98e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
import { Menu as MenuPrimitive, Transition } from "@headlessui/react";
import clsx from "clsx";
import type { ReactNode } from "react";
import { Fragment } from "react";
import { FaChevronDown } from "react-icons/fa";
interface MenuProps {
icon?: ReactNode;
chevron?: boolean;
name?: string;
buttonPosition?: "top" | "bottom";
items: JSX.Element[];
}
function Menu({ icon, name, items, chevron, buttonPosition = "top" }: MenuProps) {
return (
<MenuPrimitive>
<div className="relative">
<MenuPrimitive.Button className="flex h-8 items-center gap-1 rounded-lg bg-slate-1 p-2 font-bold shadow-depth-1 hover:bg-slate-3">
<div>{icon}</div>
{name && <p className="text-gray/50 font-mono text-sm">{name}</p>}
{chevron && <FaChevronDown size={15} className="ml-2" />}
</MenuPrimitive.Button>
<MenuItems buttonPosition={buttonPosition} items={items} />
</div>
</MenuPrimitive>
);
}
type MenuItemsProps = {
buttonPosition: "top" | "bottom";
items: JSX.Element[];
show?: boolean;
};
export const MenuItems = ({ buttonPosition, items, show }: MenuItemsProps) => {
return (
<Transition
show={show ? true : undefined}
enter="transition duration-100 ease-out"
enterFrom="transform scale-95 opacity-0"
enterTo="transform scale-100 opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0"
>
<MenuPrimitive.Items
className={clsx(
"background-color-3 absolute right-0 z-20 max-h-48 w-fit min-w-full overflow-hidden rounded-xl shadow-xl",
buttonPosition === "top" ? "top-full mt-1" : "bottom-full mb-9"
)}
>
{items.map((item, i) => {
return (
<MenuPrimitive.Item key={i} as={Fragment}>
<div className="w-full">{item}</div>
</MenuPrimitive.Item>
);
})}
</MenuPrimitive.Items>
</Transition>
);
};
export default Menu;
|