message modal

2 files changed, 69 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;
diff --git a/admin/src/components/Modal/MessageModal.module.css b/admin/src/components/Modal/MessageModal.module.css
new file mode 100644
index 0000000..5be502e
--- /dev/null
+++ b/admin/src/components/Modal/MessageModal.module.css
@@ -0,0 +1,23 @@
+.modal__input {
+  font-family: 'Barlow';
+  width: 500px;
+  min-height: 200px;
+  margin: 10px 0px;
+  padding: 18px 10px;
+  border: 3px solid;
+  border-radius: 10px;
+  font-size: 1.5rem;
+}
+
+.modal__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal__title {
+  text-align: center;
+  margin: 20px 0px 40px;
+  font-size: var(--font-medium-large);
+}