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; height?: "sm" | "md" | "rg" | "lg"; width?: "sm" | "md" | "lg" | "xl" | "auto"; textAlignment?: "left" | "center" | "right"; noBorder?: boolean; noChevron?: boolean; position?: "left" | "right"; verticalPosition?: "top" | "bottom"; menuItemsClassName?: string; customButton?: JSX.Element; menuItemsWhiteBg?: boolean; }; type MenuItemProps = { children: JSX.Element | string; renderAs?: "button" | "a"; href?: string; onClick?: (args?: any) => void; className?: string; }; const CustomMenu = ({ children, label, className = "", ellipsis = false, verticalEllipsis = false, height = "md", width = "auto", textAlignment, noBorder = false, noChevron = false, position = "right", verticalPosition = "bottom", menuItemsClassName = "", customButton, menuItemsWhiteBg = false, }: Props) => ( {({ open }) => ( <> {customButton ? ( {customButton} ) : (
{ellipsis || verticalEllipsis ? ( ) : ( {label} {!noChevron && )}
)}
{children}
)}
); const MenuItem: React.FC = ({ children, renderAs, href, onClick, className = "", }) => ( {({ active, close }) => renderAs === "a" ? ( {children} ) : ( ) } ); CustomMenu.MenuItem = MenuItem; export { CustomMenu };