80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { OptimizedImage } from './OptimizedImage'
|
|
|
|
interface ImageItem {
|
|
src: string
|
|
alt: string
|
|
caption?: string
|
|
}
|
|
|
|
interface ImageGalleryProps {
|
|
images: ImageItem[]
|
|
columns?: 2 | 3 | 4
|
|
className?: string
|
|
}
|
|
|
|
export function ImageGallery({ images, columns = 3, className = '' }: ImageGalleryProps) {
|
|
const [selectedImage, setSelectedImage] = useState<ImageItem | null>(null)
|
|
|
|
const gridCols = {
|
|
2: 'grid-cols-1 md:grid-cols-2',
|
|
3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
|
|
4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className={`grid ${gridCols[columns]} gap-4 ${className}`}>
|
|
{images.map((image, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => setSelectedImage(image)}
|
|
className="group relative overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900/50 transition-all hover:border-emerald-500 hover:shadow-lg hover:shadow-emerald-500/20"
|
|
>
|
|
<div className="aspect-video relative">
|
|
<img
|
|
src={image.src}
|
|
alt={image.alt}
|
|
className="w-full h-full object-cover transition-transform group-hover:scale-105"
|
|
/>
|
|
</div>
|
|
{image.caption && <div className="p-2 text-sm text-zinc-400">{image.caption}</div>}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{selectedImage && (
|
|
<div
|
|
className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4"
|
|
onClick={() => setSelectedImage(null)}
|
|
>
|
|
<button
|
|
className="absolute top-4 right-4 text-zinc-400 hover:text-zinc-100 transition-colors"
|
|
onClick={() => setSelectedImage(null)}
|
|
>
|
|
<svg className="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<div className="max-w-5xl w-full" onClick={e => e.stopPropagation()}>
|
|
<OptimizedImage
|
|
src={selectedImage.src}
|
|
alt={selectedImage.alt}
|
|
caption={selectedImage.caption}
|
|
width={1200}
|
|
height={800}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}
|