message modal
This commit is contained in:
parent
794d996eac
commit
aa79d811ee
2 changed files with 69 additions and 0 deletions
46
admin/src/components/Modal/MessageModal.jsx
Normal file
46
admin/src/components/Modal/MessageModal.jsx
Normal file
|
@ -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;
|
23
admin/src/components/Modal/MessageModal.module.css
Normal file
23
admin/src/components/Modal/MessageModal.module.css
Normal file
|
@ -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);
|
||||
}
|
Loading…
Reference in a new issue