112 lines
3.9 KiB
TypeScript
112 lines
3.9 KiB
TypeScript
import React, { useCallback, useEffect } from 'react'
|
|
import { AnimatePresence, motion } from 'framer-motion'
|
|
import { MdClose, MdChevronLeft, MdChevronRight } from 'react-icons/md'
|
|
|
|
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') next()
|
|
if (e.key === 'ArrowLeft') prev()
|
|
}
|
|
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-4 md:p-10"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
|
|
>
|
|
{/* Solid Brand Background */}
|
|
<div
|
|
className="absolute inset-0 bg-[#27221c]"
|
|
onClick={onClose}
|
|
aria-hidden="true"
|
|
/>
|
|
|
|
{/* Close Button at Top Right */}
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="absolute right-6 top-6 z-10 flex h-10 w-10 items-center justify-center rounded-xl bg-copper text-ink transition-all duration-300 ease-lux hover:scale-105 hover:bg-copper focus:outline-none focus:ring-2 focus:ring-copper"
|
|
>
|
|
<MdClose size={24} />
|
|
</button>
|
|
|
|
{/* Main Content Area */}
|
|
<div className="relative z-10 flex w-full max-w-7xl items-center justify-center gap-4 md:gap-8">
|
|
|
|
{/* Prev Button */}
|
|
<button
|
|
type="button"
|
|
onClick={prev}
|
|
className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-copper text-ink transition-all duration-300 ease-lux hover:scale-105 hover:bg-copper focus:outline-none focus:ring-2 focus:ring-copper"
|
|
>
|
|
<MdChevronRight size={28} />
|
|
</button>
|
|
|
|
{/* Image */}
|
|
<motion.img
|
|
key={index}
|
|
src={images[index as number]}
|
|
alt=""
|
|
className="max-h-[85vh] w-auto max-w-[calc(100%-7rem)] rounded-md object-contain shadow-2xl"
|
|
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] }}
|
|
/>
|
|
|
|
{/* Next Button */}
|
|
<button
|
|
type="button"
|
|
onClick={next}
|
|
className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-copper text-ink transition-all duration-300 ease-lux hover:scale-105 hover:bg-[#c57941] focus:outline-none focus:ring-2 focus:ring-copper "
|
|
>
|
|
<MdChevronLeft size={28} />
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div className="absolute bottom-6 z-10 flex items-center justify-center">
|
|
<span className="text-sm font-light text-copper" dir="ltr">
|
|
{(index as number) + 1} / {images.length}
|
|
</span>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
)
|
|
} |