Spaces:
Running
Running
File size: 2,736 Bytes
372531f |
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';
export default function ImageModal({ imageSrc, isOpen, onClose, onNext, onPrev }) {
if (!isOpen) return null;
// Set up keyboard event listeners
useEffect(() => {
const handleKeyDown = (e) => {
if (e.key === 'ArrowLeft') {
onPrev();
} else if (e.key === 'ArrowRight') {
onNext();
} else if (e.key === 'Escape') {
onClose();
}
};
document.addEventListener('keydown', handleKeyDown);
return () => document.removeEventListener('keydown', handleKeyDown);
}, [onClose, onNext, onPrev]);
// Swipe detection for mobile
let touchStartX = 0;
let touchEndX = 0;
const handleTouchStart = (e) => {
touchStartX = e.changedTouches[0].screenX;
};
const handleTouchEnd = (e) => {
touchEndX = e.changedTouches[0].screenX;
handleSwipeGesture();
};
const handleSwipeGesture = () => {
if (touchEndX < touchStartX - 50) {
onNext();
} else if (touchEndX > touchStartX + 50) {
onPrev();
}
};
const handleClose = (e) => {
if (e.target === e.currentTarget) {
onClose();
}
};
return (
<div
className="fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4 overflow-auto"
onClick={handleClose}
onTouchStart={handleTouchStart}
onTouchEnd={handleTouchEnd}
>
<div className="relative max-w-[90vw] max-h-[90vh] flex items-center justify-center">
<button
onClick={onPrev}
className="absolute left-4 z-10 bg-black bg-opacity-50 text-white p-2 rounded-full hover:bg-opacity-75"
>
←
</button>
<img
src={imageSrc}
alt="Modal view"
className="max-h-[90vh] max-w-[90vw] object-contain"
/>
<button
onClick={onNext}
className="absolute right-4 z-10 bg-black bg-opacity-50 text-white p-2 rounded-full hover:bg-opacity-75"
>
→
</button>
<button
onClick={onClose}
className="absolute top-4 right-4 z-10 bg-black bg-opacity-50 text-white p-2 rounded-full hover:bg-opacity-75"
>
×
</button>
</div>
</div>
);
}
|