35 lines
1.3 KiB
JavaScript
35 lines
1.3 KiB
JavaScript
// src/components/Modal.jsx
|
||
export default function Modal({ title, onClose, children, width = 900 }) {
|
||
return (
|
||
<div
|
||
onClick={onClose}
|
||
style={{
|
||
position: "fixed", inset: 0, background: "rgba(15,23,42,0.55)",
|
||
display: "flex", alignItems: "center", justifyContent: "center",
|
||
zIndex: 1000, padding: 20,
|
||
}}
|
||
>
|
||
<div
|
||
onClick={(e) => e.stopPropagation()}
|
||
style={{
|
||
background: "#fff", borderRadius: 16, width: "100%", maxWidth: width,
|
||
maxHeight: "90vh", overflow: "auto", boxShadow: "0 20px 60px rgba(0,0,0,0.3)",
|
||
}}
|
||
>
|
||
<div style={{
|
||
display: "flex", justifyContent: "space-between", alignItems: "center",
|
||
padding: "16px 22px", borderBottom: "1px solid #e2e8f0", position: "sticky",
|
||
top: 0, background: "#fff", zIndex: 2,
|
||
}}>
|
||
<h3 style={{ fontSize: 16, fontWeight: 700, color: "#1e40af" }}>{title}</h3>
|
||
<button onClick={onClose} style={{
|
||
border: "none", background: "#f1f5f9", borderRadius: 8, width: 32, height: 32,
|
||
cursor: "pointer", fontSize: 18, color: "#475569",
|
||
}}>×</button>
|
||
</div>
|
||
<div style={{ padding: 22 }}>{children}</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|