Как сделать popup-modal?
Насколько я понимаю, popup и modal - это разные окна. Popup - тип по сути Alert, а modal - какие-то формы в нем и т.д. Так вот, я написал компонент на popup, но также мне нужно сделать и modal. У меня в окнах будет и формы. Как его оптимизировать?
export const Popup = ({
title,
text,
onClose,
isOpen,
confirmButtonText = 'OK',
onConfirm,
cancleButtonText = 'Cancle'
}) => {
const [show, setShow] = useState(false);
const closeHandler = e => {
setShow(prev => !prev);
if (onClose) {
onClose(false);
}
}
const confirmHandler = e => {
if (onConfirm) {
onConfirm();
}
closeHandler();
}
useEffect(() => setShow(isOpen), [isOpen]);
if (!show) return null;
return (
<div className="popup-container">
<div className="popup">
<div className="popup-body">
<section>
<h4>{title}</h4>
<p className="popup-text">{text}</p>
<div className="popup-buttons">
<Link onClick={closeHandler} className="btn popup-cancle-btn">{cancleButtonText}</Link>
{onConfirm && <Link onClick={confirmHandler} className="btn popup-cancle-btn">{confirmButtonText}</Link>}
</div>
</section>
</div>
</div>
</div>
)
}