import React, { useState } from "react"; import Link from "next/link"; // react-poppper import { usePopper } from "react-popper"; // headless ui import { Menu } from "@headlessui/react"; // ui import { DropdownProps } from "components/ui"; // icons import { ChevronDown, MoreHorizontal } from "lucide-react"; export type CustomMenuProps = DropdownProps & { children: React.ReactNode; ellipsis?: boolean; noBorder?: boolean; verticalEllipsis?: boolean; menuButtonOnClick?: (...args: any) => void; }; const CustomMenu = ({ buttonClassName = "", customButtonClassName = "", placement, children, className = "", customButton, disabled = false, ellipsis = false, label, maxHeight = "md", noBorder = false, noChevron = false, optionsClassName = "", verticalEllipsis = false, width = "auto", menuButtonOnClick, }: CustomMenuProps) => { const [referenceElement, setReferenceElement] = useState(null); const [popperElement, setPopperElement] = useState(null); const { styles, attributes } = usePopper(referenceElement, popperElement, { placement: placement ?? "bottom-start", }); return ( {({ open }) => ( <> {customButton ? ( ) : ( <> {ellipsis || verticalEllipsis ? ( ) : ( )} )}
{children}
)}
); }; type MenuItemProps = { children: React.ReactNode; renderAs?: "button" | "a"; href?: string; onClick?: (args?: any) => void; className?: string; }; const MenuItem: React.FC = ({ children, renderAs, href, onClick, className = "" }) => ( {({ active, close }) => renderAs === "a" ? ( {children} ) : ( ) } ); CustomMenu.MenuItem = MenuItem; export { CustomMenu };