Mav-Mobile-UI/src/components/UI/ModalComponent.tsx

import type React from "react";
import Modal from "react-modal";
import clsx from "clsx";

type ModalComponentProps = {
  isModalOpen: boolean;
  children: React.ReactNode;
  close: () => void;
};

const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) => {
  return (
    <Modal
      isOpen={isModalOpen}
      onRequestClose={close}
      className={clsx(
        "bg-[#1e2a38] p-3 rounded-lg shadow-lg w-[95%] mt-[2%] md:w-[60%] h-[100%] md:h-[95%] lg:h-[80%] z-[100] overflow-y-hidden border border-gray-500"
      )}
      overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100 "
      style={{
        overlay: {
          transition: "opacity 200ms ease-in-out",
        },
        content: {
          transition: "all 200ms ease-in-out",
        },
      }}
    >
      {children}
    </Modal>
  );
};

export default ModalComponent;