"use client" import { AnimatePresence, motion } from "framer-motion" import { useState } from "react" import ArrowRightIcon from "@/components/Icons/ArrowRight" import CloseIcon from "@/components/Icons/Close" import Image from "@/components/Image" import Button from "@/components/TempDesignSystem/Button" import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" import styles from "./Lightbox.module.css" import type { FullViewProps } from "@/types/components/lightbox/lightbox" export default function FullView({ image, onClose, onNext, onPrev, currentIndex, totalImages, }: FullViewProps) { const [animateLeft, setAnimateLeft] = useState(true) function handleSwipe(offset: number) { if (offset > 30) onPrev() if (offset < -30) onNext() } function handleNext() { setAnimateLeft(true) onNext() } function handlePrev() { setAnimateLeft(false) onPrev() } const variants = { initial: (animateLeft: boolean) => ({ opacity: 0, x: animateLeft ? 300 : -300, }), animate: { opacity: 1, x: 0 }, exit: (animateLeft: boolean) => ({ opacity: 0, x: animateLeft ? -300 : 300, }), } return (
{`${currentIndex + 1} / ${totalImages}`}
handleSwipe(info.offset.x)} > {image.metaData.altText}
{image.metaData.title && ( {image.metaData.title} )}
) }