68 lines
2.1 KiB
JavaScript
68 lines
2.1 KiB
JavaScript
import {Fragment} from 'react';
|
||
import PropTypes from 'prop-types';
|
||
|
||
function Modal(props) {
|
||
if (!props.showModal) return null;
|
||
|
||
return (
|
||
<Fragment>
|
||
<div
|
||
className={
|
||
'justify-center items-center flex overflow-x-hidden overflow-y-auto fixed \
|
||
inset-0 z-50 outline-none focus:outline-none'
|
||
}
|
||
>
|
||
<div className='relative w-auto my-6 mx-auto w-4/5 max-w-6xl'>
|
||
<div
|
||
className={
|
||
'border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white \
|
||
outline-none focus:outline-none'
|
||
}
|
||
>
|
||
<button
|
||
className={
|
||
'absolute top-0 left-0 z-10 p-1 mr-auto bg-transparent border-0 text-black opacity-50 float-left \
|
||
text-3xl leading-none font-semibold outline-none focus:outline-none'
|
||
}
|
||
type='button'
|
||
onClick={props.onClose}
|
||
>
|
||
<span
|
||
className={
|
||
'bg-transparent text-black opacity-50 h-6 w-6 text-2xl block outline-none focus:outline-none'
|
||
}
|
||
>
|
||
×
|
||
</span>
|
||
</button>
|
||
{props.header && (
|
||
<div className='flex items-start justify-between p-5 border-b border-solid border-blueGray-200 rounded-t'>
|
||
<p className='text-2xl font-medium'>{props.header}</p>
|
||
</div>
|
||
)}
|
||
<div className='relative p-6 flex-auto'>
|
||
<p className='my-4 text-blueGray-500 text-lg leading-relaxed'>
|
||
{props.body}
|
||
</p>
|
||
</div>
|
||
<div className='flex items-center justify-end p-4 border-t border-solid border-blueGray-200 rounded-b'>
|
||
{props.footer}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className='opacity-75 fixed inset-0 z-40 bg-black'/>
|
||
</Fragment>
|
||
);
|
||
}
|
||
|
||
Modal.propTypes = {
|
||
showModal: PropTypes.bool.isRequired,
|
||
onClose: PropTypes.func.isRequired,
|
||
header: PropTypes.node,
|
||
body: PropTypes.node.isRequired,
|
||
footer: PropTypes.node.isRequired
|
||
};
|
||
|
||
export default Modal;
|