129 lines
3.4 KiB
TypeScript
129 lines
3.4 KiB
TypeScript
"use client"
|
|
|
|
import { AnimatePresence, motion } from "framer-motion"
|
|
import { useState } from "react"
|
|
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
|
|
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,
|
|
hideLabel,
|
|
}: 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 (
|
|
<div className={styles.fullViewContainer}>
|
|
<Button
|
|
intent="text"
|
|
size="small"
|
|
variant="icon"
|
|
className={styles.fullViewCloseButton}
|
|
onClick={onClose}
|
|
>
|
|
<MaterialIcon
|
|
icon="close"
|
|
size={32}
|
|
className={styles.fullViewCloseIcon}
|
|
color="Icon/Inverted"
|
|
/>
|
|
</Button>
|
|
<div className={styles.fullViewHeader}>
|
|
<span className={styles.imagePosition}>
|
|
<Caption color="white">
|
|
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
|
{`${currentIndex + 1} / ${totalImages}`}
|
|
</Caption>
|
|
</span>
|
|
</div>
|
|
<div className={styles.fullViewImageContainer}>
|
|
<AnimatePresence initial={false} custom={animateLeft}>
|
|
<motion.div
|
|
key={image.src}
|
|
custom={animateLeft}
|
|
variants={variants}
|
|
initial="initial"
|
|
animate="animate"
|
|
exit="exit"
|
|
transition={{ duration: 0.3 }}
|
|
className={styles.fullViewImage}
|
|
drag="x"
|
|
onDragEnd={(_e, info) => handleSwipe(info.offset.x)}
|
|
>
|
|
<Image
|
|
alt={image.alt}
|
|
fill
|
|
sizes="(min-width: 1500px) 1500px, 100vw"
|
|
src={image.src}
|
|
style={{ objectFit: "cover" }}
|
|
/>
|
|
|
|
<div className={styles.fullViewFooter}>
|
|
{image.caption && !hideLabel && (
|
|
<Body color="white">{image.caption}</Body>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
</div>
|
|
|
|
<motion.button
|
|
className={`${styles.navigationButton} ${styles.fullViewPrevButton}`}
|
|
onClick={handlePrev}
|
|
>
|
|
<MaterialIcon
|
|
icon="arrow_forward"
|
|
color="Icon/Interactive/Default"
|
|
className={styles.leftTransformIcon}
|
|
/>
|
|
</motion.button>
|
|
<motion.button
|
|
className={`${styles.navigationButton} ${styles.fullViewNextButton}`}
|
|
onClick={handleNext}
|
|
>
|
|
<MaterialIcon icon="arrow_forward" color="Icon/Interactive/Default" />
|
|
</motion.button>
|
|
</div>
|
|
)
|
|
}
|