blob: fc651bf0f2a8fe92dcfb2589df469d13a1cf3301 (
plain)
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
85
86
87
88
89
90
91
92
93
94
95
96
|
import React, { useState, useEffect } from 'react';
interface Props {
images: Array<{
src: string;
alt?: string;
id?: string | number;
}>;
}
export default function ImageGalleryGrid({ images }: Props) {
const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
const closeModal = () => setSelectedIndex(null);
const showPrev = (e: React.MouseEvent) => {
e.stopPropagation();
setSelectedIndex((prev) => (prev !== null && prev > 0 ? prev - 1 : prev));
};
const showNext = (e: React.MouseEvent) => {
e.stopPropagation();
setSelectedIndex((prev) =>
prev !== null && prev < images.length - 1 ? prev + 1 : prev
);
};
useEffect(() => {
function handleKeyDown(event: KeyboardEvent) {
if (selectedIndex === null) return;
if (event.key === 'Escape') {
closeModal;
} else if (event.key === 'ArrowLeft') {
setSelectedIndex((prev) => (prev && prev > 0 ? prev - 1 : prev));
} else if (event.key === 'ArrowRight') {
setSelectedIndex((prev) =>
prev !== null && prev < images.length - 1 ? prev + 1 : prev
);
}
}
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [selectedIndex, images.length]);
return (
<>
<div className="grid gap-2 grid-cols-4 p-4">
{images.map((image, idx) => (
<div
key={image.id ?? image.src}
className="relative group overflow-hidden rounded-xl shadow-lg cursor-pointer aspect-square"
onClick={() => setSelectedIndex(idx)}
>
<img
src={image.src}
alt={image.alt || 'Gallery image'}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
/>
</div>
))}
</div>
{/* Overlay */}
{selectedIndex !== null && (
<div
className="fixed inset-0 bg-white/50 dark:bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
onClick={closeModal}
role="dialog"
aria-modal="true"
>
{/* Prev arrow */}
<button
onClick={showPrev}
className="absolute left-4 text-black dark:text-white text-4xl focus:outline-none cursor-pointer"
disabled={selectedIndex === 0}
>
←
</button>
<img
src={images[selectedIndex].src}
alt={images[selectedIndex].alt || 'Enlarged gallery'}
className="w-1/2 h-1/2 object-contain rounded-lg"
/>
{/* Next arrow */}
<button
onClick={showNext}
className="absolute right-4 text-black dark:text-white text-4xl focus:outline-none cursor-pointer"
disabled={selectedIndex === images.length - 1}
>
→
</button>
</div>
)}
</>
);
}
|
