100 lines
3.4 KiB
TypeScript
100 lines
3.4 KiB
TypeScript
import React, { useCallback, useEffect } from 'react'
|
|
import { AnimatePresence, motion } from 'framer-motion'
|
|
import { XIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
|
|
|
|
type Props = {
|
|
images: string[]
|
|
index: number | null
|
|
onClose: () => void
|
|
onChange: (index: number) => void
|
|
}
|
|
|
|
export function Lightbox({ images, index, onClose, onChange }: Props) {
|
|
const isOpen = index !== null
|
|
|
|
const next = useCallback(() => {
|
|
if (index === null) return
|
|
onChange((index + 1) % images.length)
|
|
}, [index, images.length, onChange])
|
|
|
|
const prev = useCallback(() => {
|
|
if (index === null) return
|
|
onChange((index - 1 + images.length) % images.length)
|
|
}, [index, images.length, onChange])
|
|
|
|
useEffect(() => {
|
|
if (!isOpen) return
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') onClose()
|
|
if (e.key === 'ArrowRight') prev()
|
|
if (e.key === 'ArrowLeft') next()
|
|
}
|
|
window.addEventListener('keydown', onKey)
|
|
document.body.style.overflow = 'hidden'
|
|
return () => {
|
|
window.removeEventListener('keydown', onKey)
|
|
document.body.style.overflow = ''
|
|
}
|
|
}, [isOpen, onClose, next, prev])
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{isOpen && (
|
|
<motion.div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
className="fixed inset-0 z-[90] flex items-center justify-center p-5 md:p-10"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
|
|
>
|
|
<div
|
|
className="absolute inset-0 bg-ink/90 backdrop-blur-md"
|
|
onClick={onClose}
|
|
aria-hidden="true"
|
|
/>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="absolute left-6 top-6 z-10 flex h-12 w-12 items-center justify-center border border-ivory/20 text-ivory transition-colors duration-200 ease-lux hover:border-copper hover:text-copper md:left-10 md:top-10"
|
|
>
|
|
<XIcon className="h-5 w-5" />
|
|
</button>
|
|
|
|
<motion.img
|
|
key={index}
|
|
src={images[index as number]}
|
|
alt=""
|
|
className="relative max-h-[80vh] w-auto max-w-full object-contain"
|
|
initial={{ opacity: 0, scale: 0.96 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
exit={{ opacity: 0, scale: 0.96 }}
|
|
transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
|
|
/>
|
|
|
|
<div className="absolute bottom-6 z-10 flex items-center gap-4 md:bottom-10">
|
|
<button
|
|
type="button"
|
|
onClick={prev}
|
|
className="flex h-11 w-11 items-center justify-center border border-ivory/20 text-ivory transition-colors duration-200 ease-lux hover:border-copper hover:text-copper"
|
|
>
|
|
<ChevronRightIcon className="h-5 w-5" />
|
|
</button>
|
|
<span className="text-sm font-light text-ivory/70" dir="ltr">
|
|
{(index as number) + 1} / {images.length}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={next}
|
|
className="flex h-11 w-11 items-center justify-center border border-ivory/20 text-ivory transition-colors duration-200 ease-lux hover:border-copper hover:text-copper"
|
|
>
|
|
<ChevronLeftIcon className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
)
|
|
} |