File size: 910 Bytes
246d201 |
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 |
import React from "react";
interface ModalBackdropProps {
children: React.ReactNode;
onClose?: () => void;
}
export function ModalBackdrop({ children, onClose }: ModalBackdropProps) {
React.useEffect(() => {
const handleEscape = (e: KeyboardEvent) => {
if (e.key === "Escape") onClose?.();
};
window.addEventListener("keydown", handleEscape);
return () => window.removeEventListener("keydown", handleEscape);
}, []);
const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
if (e.target === e.currentTarget) onClose?.(); // only close if the click was on the backdrop
};
return (
<div className="fixed inset-0 flex items-center justify-center z-20">
<div
onClick={handleClick}
className="fixed inset-0 bg-black bg-opacity-80"
/>
<div className="relative">{children}</div>
</div>
);
}
|