nysoure/frontend/src/components/popup.tsx

import React from "react";
import { createRoot } from "react-dom/client";

export default function showPopup(
  content: React.ReactNode,
  element: HTMLElement,
) {
  const eRect = element.getBoundingClientRect();

  const div = document.createElement("div");
  div.style.position = "fixed";
  if (eRect.x > window.innerWidth / 2) {
    div.style.right = `${window.innerWidth - eRect.x}px`;
  } else {
    div.style.left = `${eRect.x}px`;
  }
  if (eRect.y > window.innerHeight / 2) {
    div.style.bottom = `${window.innerHeight - eRect.y}px`;
  } else {
    div.style.top = `${eRect.y}px`;
  }

  div.style.zIndex = "9999";
  div.className = "animate-appearance-in";

  document.body.appendChild(div);

  const mask = document.createElement("div");

  const close = () => {
    console.log("close popup");
    document.body.removeChild(div);
    document.body.removeChild(mask);
  };

  mask.style.position = "fixed";
  mask.style.top = "0";
  mask.style.left = "0";
  mask.style.width = "100%";
  mask.style.height = "100%";
  mask.style.zIndex = "9998";
  mask.onclick = close;
  document.body.appendChild(mask);

  createRoot(div).render(
    <context.Provider value={close}>{content}</context.Provider>,
  );
}

const context = React.createContext<() => void>(() => {});

export function useClosePopup() {
  return React.useContext(context);
}

export function PopupMenuItem({
  children,
  onClick,
}: {
  children: React.ReactNode;
  onClick: () => void;
}) {
  const close = useClosePopup();
  return (
    <li
      onClick={() => {
        close();
        onClick();
      }}
    >
      {children}
    </li>
  );
}