120 lines
3.8 KiB
TypeScript
120 lines
3.8 KiB
TypeScript
"use client"
|
|
import * as Dialog from "@radix-ui/react-dialog"
|
|
import { AnimatePresence, motion } from "framer-motion"
|
|
import React, { useState } from "react"
|
|
|
|
import FullView from "./FullView"
|
|
import Gallery from "./Gallery"
|
|
|
|
import styles from "./Lightbox.module.css"
|
|
|
|
import type { LightboxProps } from "@/types/components/lightbox/lightbox"
|
|
|
|
export default function Lightbox({
|
|
images,
|
|
children,
|
|
dialogTitle,
|
|
}: LightboxProps) {
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
const [selectedImageIndex, setSelectedImageIndex] = useState(0)
|
|
const [isFullView, setIsFullView] = useState(false)
|
|
|
|
function handleOpenChange(open: boolean) {
|
|
if (!open) {
|
|
setTimeout(() => {
|
|
setIsOpen(false)
|
|
setSelectedImageIndex(0)
|
|
setIsFullView(false)
|
|
}, 300) // 300ms delay
|
|
} else {
|
|
setIsOpen(true)
|
|
}
|
|
}
|
|
|
|
function handleNext() {
|
|
setSelectedImageIndex((prevIndex) => (prevIndex + 1) % images.length)
|
|
}
|
|
|
|
function handlePrev() {
|
|
setSelectedImageIndex(
|
|
(prevIndex) => (prevIndex - 1 + images.length) % images.length
|
|
)
|
|
}
|
|
|
|
const triggerElement = React.Children.map(
|
|
children,
|
|
function mapChild(child): React.ReactNode {
|
|
if (React.isValidElement(child)) {
|
|
if (child.props.id === "lightboxTrigger") {
|
|
return React.cloneElement(child, {
|
|
onClick: () => setIsOpen(true),
|
|
} as React.HTMLAttributes<HTMLElement>)
|
|
} else if (child.props.children) {
|
|
return React.cloneElement(child, {
|
|
children: React.Children.map(child.props.children, mapChild),
|
|
} as React.HTMLAttributes<HTMLElement>)
|
|
}
|
|
}
|
|
return child
|
|
}
|
|
)
|
|
|
|
return (
|
|
<>
|
|
{triggerElement}
|
|
<Dialog.Root open={isOpen} onOpenChange={handleOpenChange}>
|
|
<AnimatePresence>
|
|
{isOpen && (
|
|
<Dialog.Portal forceMount>
|
|
<Dialog.Overlay asChild>
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.2 }}
|
|
className={styles.overlay}
|
|
/>
|
|
</Dialog.Overlay>
|
|
<Dialog.Content asChild>
|
|
<motion.div
|
|
className={`${styles.content} ${
|
|
isFullView ? styles.fullViewContent : styles.galleryContent
|
|
}`}
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
animate={{ opacity: 1, scale: 1, x: "-50%", y: "-50%" }}
|
|
exit={{ opacity: 0, scale: 0.95 }}
|
|
transition={{ duration: 0.2 }}
|
|
>
|
|
{isFullView ? (
|
|
<FullView
|
|
image={images[selectedImageIndex]}
|
|
onClose={() => setIsFullView(false)}
|
|
onNext={handleNext}
|
|
onPrev={handlePrev}
|
|
currentIndex={selectedImageIndex}
|
|
totalImages={images.length}
|
|
/>
|
|
) : (
|
|
<Gallery
|
|
images={images}
|
|
dialogTitle={dialogTitle}
|
|
onClose={() => setIsOpen(false)}
|
|
onSelectImage={(image) => {
|
|
setSelectedImageIndex(
|
|
images.findIndex((img) => img.url === image.url)
|
|
)
|
|
}}
|
|
onImageClick={() => setIsFullView(true)}
|
|
selectedImage={images[selectedImageIndex]}
|
|
/>
|
|
)}
|
|
</motion.div>
|
|
</Dialog.Content>
|
|
</Dialog.Portal>
|
|
)}
|
|
</AnimatePresence>
|
|
</Dialog.Root>
|
|
</>
|
|
)
|
|
}
|