From bf33d07ef8ce967050f9f317a4e0324796115076 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Sat, 15 Jun 2024 21:03:06 +0530
Subject: [PATCH] feat: generic modal

---
 src/components/atoms/GenericModal.tsx | 44 +++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 src/components/atoms/GenericModal.tsx

diff --git a/src/components/atoms/GenericModal.tsx b/src/components/atoms/GenericModal.tsx
new file mode 100644
index 00000000..0e760c3d
--- /dev/null
+++ b/src/components/atoms/GenericModal.tsx
@@ -0,0 +1,44 @@
+import React, { FC } from 'react';
+import { Modal, IconButton, Box } from '@mui/material';
+import { Clear } from "@mui/icons-material";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children?: JSX.Element;
+  modalStyle?: React.CSSProperties;
+  canBeClosed?: boolean;
+}
+
+export const GenericModal: FC<ModalProps> = (
+  { isOpen, onClose, children, modalStyle , canBeClosed= true}) => {
+
+  return (
+        <Modal open={isOpen} onClose={canBeClosed ? onClose : ()=>{}} >
+          <Box sx={modalStyle ?  {...modalStyle,   boxShadow: 24, position: 'absolute',} : defaultModalStyle}>
+            {canBeClosed ?
+              <IconButton onClick={onClose} sx={{ float: "right" }}>
+                <Clear sx={{ fontSize: 20 }}/>
+              </IconButton>
+              : null
+            }
+            {children}
+          </Box>
+        </Modal>
+    );
+};
+
+ const defaultModalStyle = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 500,
+  bgcolor: 'background.paper',
+  boxShadow: 24,
+  p: 4,
+  height:'60%',
+  display:'block',
+  overflow:'scroll',
+  padding: '5px 25px 10px 25px',
+};