40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import { useState } from 'react'
|
|
import Lightbox from 'yet-another-react-lightbox'
|
|
import 'yet-another-react-lightbox/styles.css'
|
|
import Image from './Image'
|
|
|
|
const PhotoGallery = (props) => {
|
|
const { title, data } = props
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
const [photoIndex, setPhotoIndex] = useState(0)
|
|
const slides = data.map((d) => {
|
|
return { src: d }
|
|
})
|
|
|
|
return (
|
|
<div className="grid grid-cols-4 gap-2 p-2">
|
|
{data.length
|
|
? data.map((d: string, index: number) => (
|
|
<div className="relative flex h-24 flex-col items-center overflow-hidden" key={d}>
|
|
<Image
|
|
alt={title}
|
|
onClick={() => {
|
|
setPhotoIndex(index)
|
|
setIsOpen(true)
|
|
}}
|
|
src={d}
|
|
quality={75}
|
|
loading="lazy"
|
|
fill
|
|
style={{ objectFit: 'cover' }}
|
|
className="-mt-18 w-full max-w-none cursor-pointer"
|
|
/>
|
|
</div>
|
|
))
|
|
: null}
|
|
<Lightbox index={photoIndex} open={isOpen} slides={slides} close={() => setIsOpen(false)} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PhotoGallery
|