import React from "react"; // next import Link from "next/link"; // headless ui import { Menu, Transition } from "@headlessui/react"; // icons import { ChevronDownIcon, EllipsisHorizontalIcon } from "@heroicons/react/24/outline"; type Props = { children: React.ReactNode; label?: string | JSX.Element; className?: string; ellipsis?: boolean; verticalEllipsis?: boolean; width?: "sm" | "md" | "lg" | "xl" | "auto"; textAlignment?: "left" | "center" | "right"; noBorder?: boolean; optionsPosition?: "left" | "right"; customButton?: JSX.Element; }; type MenuItemProps = { children: JSX.Element | string; renderAs?: "button" | "a"; href?: string; onClick?: () => void; className?: string; }; const CustomMenu = ({ children, label, className = "", ellipsis = false, verticalEllipsis = false, width = "auto", textAlignment, noBorder = false, optionsPosition = "right", customButton, }: Props) => ( {customButton ? ( {customButton} ) : (
{ellipsis || verticalEllipsis ? ( ) : ( {label} {!noBorder && )}
)}
{children}
); const MenuItem: React.FC = ({ children, renderAs, href, onClick, className = "", }) => ( `${className} ${ active ? "bg-hover-gray" : "" } cursor-pointer select-none gap-2 truncate rounded px-1 py-1.5 text-gray-500` } > {({ close }) => renderAs === "a" ? ( {children} ) : ( ) } ); CustomMenu.MenuItem = MenuItem; export { CustomMenu };