File size: 2,304 Bytes
788eab4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | import React, { useEffect } from "react";
import { X } from "lucide-react";
interface ModalProps {
isOpen: boolean;
onClose: () => void;
title: string;
children: React.ReactNode;
maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "4xl";
footer?: React.ReactNode;
}
export const Modal: React.FC<ModalProps> = ({
isOpen,
onClose,
title,
children,
maxWidth = "lg",
footer,
}) => {
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === "Escape") {
onClose();
}
};
if (isOpen) {
window.addEventListener("keydown", handleKeyDown);
document.body.style.overflow = "hidden";
}
return () => {
window.removeEventListener("keydown", handleKeyDown);
document.body.style.overflow = "unset";
};
}, [isOpen, onClose]);
if (!isOpen) return null;
const maxWidthStyles = {
sm: "max-w-sm",
md: "max-w-md",
lg: "max-w-lg",
xl: "max-w-xl",
"2xl": "max-w-2xl",
"4xl": "max-w-4xl",
};
return (
<div
className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-[#040810]/80 backdrop-blur-md animate-in fade-in duration-200"
onClick={onClose}
role="dialog"
aria-modal="true"
aria-labelledby="modal-title"
>
<div
className={`bg-[#0d1527] w-full ${maxWidthStyles[maxWidth]} rounded-3xl shadow-2xl border border-[#1b2b4d] overflow-hidden flex flex-col max-h-[90vh] text-slate-100`}
onClick={(e) => e.stopPropagation()}
>
<div className="flex items-center justify-between px-6 py-4 border-b border-[#1b2b4d]">
<h2 id="modal-title" className="text-lg font-bold text-white">
{title}
</h2>
<button
onClick={onClose}
className="p-1 rounded-lg text-slate-400 hover:text-white hover:bg-[#111d38] transition-colors cursor-pointer"
aria-label="Close modal"
>
<X className="w-5 h-5" />
</button>
</div>
<div className="p-6 overflow-y-auto flex-1">{children}</div>
{footer && (
<div className="px-6 py-4 bg-[#080e1c] border-t border-[#1b2b4d] flex items-center justify-end gap-3">
{footer}
</div>
)}
</div>
</div>
);
};
|