25 lines
752 B
JavaScript
25 lines
752 B
JavaScript
import { useEffect } from "react";
|
|
import "../../styles/ImageModal.css";
|
|
|
|
export default function ImageModal({ imageUrl, itemName, onClose }) {
|
|
useEffect(() => {
|
|
// Close modal on Escape key
|
|
const handleEscape = (e) => {
|
|
if (e.key === "Escape") onClose();
|
|
};
|
|
document.addEventListener("keydown", handleEscape);
|
|
return () => document.removeEventListener("keydown", handleEscape);
|
|
}, [onClose]);
|
|
|
|
if (!imageUrl) return null;
|
|
|
|
return (
|
|
<div className="image-modal-overlay" onClick={onClose}>
|
|
<div className="image-modal-content" onClick={onClose}>
|
|
<img src={imageUrl} alt={itemName} className="image-modal-img" />
|
|
<p className="image-modal-caption">{itemName}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|