import React, { useEffect } from "react"; import Link from "next/link"; type Props = { position: { x: number; y: number; }; children: React.ReactNode; title?: string | JSX.Element; isOpen: boolean; setIsOpen: React.Dispatch>; }; const ContextMenu = ({ position, children, title, isOpen, setIsOpen }: Props) => { useEffect(() => { const hideContextMenu = () => { if (isOpen) setIsOpen(false); }; window.addEventListener("click", hideContextMenu); window.addEventListener("keydown", (e: KeyboardEvent) => { if (e.key === "Escape") hideContextMenu(); }); return () => { window.removeEventListener("click", hideContextMenu); window.removeEventListener("keydown", hideContextMenu); }; }, [isOpen, setIsOpen]); return (
{title && (

{title}

)} {children}
); }; type MenuItemProps = { children: JSX.Element | string; renderAs?: "button" | "a"; href?: string; onClick?: () => void; className?: string; Icon?: any; }; const MenuItem: React.FC = ({ children, renderAs, href = "", onClick, className = "", Icon, }) => ( <> {renderAs === "a" ? ( <> {Icon && } {children} ) : ( )} ); ContextMenu.Item = MenuItem; export { ContextMenu };