39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import Modal from "react-modal";
|
|
|
|
type ModalComponentProps = {
|
|
isModalOpen: boolean;
|
|
children: React.ReactNode;
|
|
close: () => void;
|
|
};
|
|
const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) => {
|
|
return (
|
|
<Modal
|
|
isOpen={isModalOpen}
|
|
onRequestClose={close}
|
|
className="bg-[#1e2a38] p-6 rounded-lg shadow-lg w-[95%] mt-[2%] md:w-[60%] z-100 overflow-y-auto border border-gray-600 max-h-[90%]"
|
|
overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100"
|
|
closeTimeoutMS={200}
|
|
style={{
|
|
overlay: {
|
|
transition: "opacity 200ms ease-in-out",
|
|
},
|
|
content: {
|
|
transition: "all 200ms ease-in-out",
|
|
},
|
|
}}
|
|
>
|
|
<div className="flex justify-end">
|
|
<button
|
|
onClick={close}
|
|
className="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg mb-4 hover:cursor-pointer"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
{children}
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default ModalComponent;
|