28 lines
864 B
JavaScript
28 lines
864 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={(e) => e.stopPropagation()}>
|
||
<button className="image-modal-close" onClick={onClose}>
|
||
×
|
||
</button>
|
||
<img src={imageUrl} alt={itemName} className="image-modal-img" />
|
||
<p className="image-modal-caption">{itemName}</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|