import type { FunctionComponent } from "preact";
import { Portal } from "./portal.tsx";

export const Modal: FunctionComponent = ({ children }) => {
  return (
    <Portal>
      <div class="fixed inset-0 z-10 overflow-y-auto bg-black/50 grid">
        <div class="place-self-center bg-white dark:bg-mixed-400 w-min min-w-64 rounded-lg p-4 overflow-scroll relative">
          {children}
        </div>
      </div>
    </Portal>
  );
};