message modal

1 files changed, 46 insertions, 0 deletions

diff --git a/admin/src/components/Modal/MessageModal.jsx b/admin/src/components/Modal/MessageModal.jsx
new file mode 100644
index 0000000..fcce885
--- /dev/null
+++ b/admin/src/components/Modal/MessageModal.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import {Modal, Box} from '@mui/material';
+import styles from './MessageModal.module.css';
+import Button from '../Button/Button';
+
+const MessageModal = ({title, open, setOpen, onChange, onClick}) => {
+  const style = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: 1000,
+    bgcolor: 'background.paper',
+    borderRadius: '10px',
+    boxShadow: 24,
+    p: 4,
+  };
+
+  const handleClose = () => setOpen(false);
+
+  return (
+    <Modal
+      open={open}
+      onClose={handleClose}
+      aria-labelledby='modal-modal-title'
+      aria-describedby='modal-modal-description'
+    >
+      <Box sx={style}>
+        <h1 id='modal-modal-title' className={styles.modal__title}>
+          {title}
+        </h1>
+        <div className={styles.modal__content}>
+          <textarea
+            className={styles.modal__input}
+            onChange={onChange}
+            type='textarea'
+            placeholder='Enter the reason for rejection'
+          />
+          <Button color='red' title='Confirm Reject' onClick={onClick} />
+        </div>
+      </Box>
+    </Modal>
+  );
+};
+
+export default MessageModal;