32 lines
1023 B
JavaScript
32 lines
1023 B
JavaScript
import React from 'react'
|
|
import '../styles/modal.css'
|
|
|
|
export default function Modal({ isOpen, title, message, onConfirm, onCancel, confirmText = 'Confirm', cancelText = 'Cancel', isDangerous = false }) {
|
|
if (!isOpen) return null
|
|
|
|
return (
|
|
<div className="modal-overlay" onClick={onCancel}>
|
|
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
|
|
<div className="modal-header">
|
|
<h2>{title}</h2>
|
|
<button className="modal-close" onClick={onCancel}>×</button>
|
|
</div>
|
|
<div className="modal-body">
|
|
<p>{message}</p>
|
|
</div>
|
|
<div className="modal-footer">
|
|
<button className="modal-btn modal-btn-cancel" onClick={onCancel}>
|
|
{cancelText}
|
|
</button>
|
|
<button
|
|
className={`modal-btn modal-btn-confirm ${isDangerous ? 'modal-btn-danger' : ''}`}
|
|
onClick={onConfirm}
|
|
>
|
|
{confirmText}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|