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; optionsPosition?: "left" | "right"; customButton?: JSX.Element; }; 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, optionsPosition = "right", customButton, }: Props) => ( {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 };