Как сделать 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>
    )
}

Ответы (0 шт):