87 lines
3.3 KiB
React
87 lines
3.3 KiB
React
|
import { XLg } from '../assets';
|
||
|
|
import './Modal.css';
|
||
|
|
|
||
|
|
export function Modal(props) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className='modal-background'
|
||
|
|
onClick={props.onClose}
|
||
|
|
style={{ zIndex: props.show ? 10 : -10 }}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className='modal-container'
|
||
|
|
onClick={(event) => event.stopPropagation()}
|
||
|
|
style={props.style}
|
||
|
|
>
|
||
|
|
<div className='modal-header'>
|
||
|
|
<span className='modal-title'>{props.title}</span>
|
||
|
|
<button className='modal-close' onClick={props.onClose}>
|
||
|
|
<img className='modal-close-icon' src={XLg} />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div className='modal-body'>{props.children}</div>
|
||
|
|
<div className='modal-footer'>
|
||
|
|
{props.cancelButton && (
|
||
|
|
<button className='modal-button-cancel' onClick={props.onCancel}>
|
||
|
|
{props.cancelButton}
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
{props.deleteButton && (
|
||
|
|
<button className='modal-button-delete' onClick={props.onDelete}>
|
||
|
|
{props.deleteButton}
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
{props.submitButton && (
|
||
|
|
<button className='modal-button' onClick={props.onSubmit}>
|
||
|
|
{props.submitButton}
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function SmallModal(props) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className='modal-background'
|
||
|
|
onClick={props.onClose}
|
||
|
|
style={{ zIndex: props.show ? 10 : -10 }}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className='small-modal-container'
|
||
|
|
onClick={(event) => event.stopPropagation()}
|
||
|
|
style={props.style}
|
||
|
|
>
|
||
|
|
<div className='small-modal-header'>
|
||
|
|
<span className='small-modal-title'>{props.title}</span>
|
||
|
|
<button className='modal-close' onClick={props.onClose}>
|
||
|
|
<img className='modal-close-icon' src={XLg} />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div className='modal-body'>
|
||
|
|
<span className='small-modal-message'>{props.message}</span>
|
||
|
|
</div>
|
||
|
|
<div className='small-modal-footer'>
|
||
|
|
{props.cancelButton && (
|
||
|
|
<button className='modal-button-cancel' onClick={props.onCancel}>
|
||
|
|
{props.cancelButton}
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
{props.deleteButton && (
|
||
|
|
<button className='small-modal-button-delete' onClick={props.onDelete}>
|
||
|
|
{props.deleteButton}
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
{props.submitButton && (
|
||
|
|
<button className='modal-button' onClick={props.onSubmit}>
|
||
|
|
{props.submitButton}
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|