8f3d203b70
fix(SW-1041): fix UI design feedback * fix(SW-1041): fix UI design feedback * fix(SW-1041): small fix * fix(SW-1041): add filter and sort badge * fix(SW-1041): update activefilter when entering map view * fix(SW-1041): create hook with activefilters * fix(SW-1041): hook only sets filter * fix(SW-1041): fix padding breadcrumbs * fix(SW-1041): rename hook * fix(SW-1041): fix double scroll Approved-by: Pontus Dreij Approved-by: Niclas Edenvin
94 lines
2.7 KiB
TypeScript
94 lines
2.7 KiB
TypeScript
"use client"
|
|
import { AnimatePresence, motion } from "framer-motion"
|
|
|
|
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) {
|
|
function handleSwipe(offset: number) {
|
|
if (offset > 30) onPrev()
|
|
if (offset < -30) onNext()
|
|
}
|
|
return (
|
|
<div className={styles.fullViewContainer}>
|
|
<Button
|
|
intent="text"
|
|
size="small"
|
|
variant="icon"
|
|
className={styles.fullViewCloseButton}
|
|
onClick={onClose}
|
|
>
|
|
<CloseIcon
|
|
width={32}
|
|
height={32}
|
|
className={styles.fullViewCloseIcon}
|
|
color="white"
|
|
/>
|
|
</Button>
|
|
<div className={styles.fullViewHeader}>
|
|
<span className={styles.imagePosition}>
|
|
<Caption color="white">
|
|
{`${currentIndex + 1} / ${totalImages}`}
|
|
</Caption>
|
|
</span>
|
|
</div>
|
|
<div className={styles.fullViewImageContainer}>
|
|
<AnimatePresence initial={false} custom={currentIndex}>
|
|
<motion.div
|
|
key={image.imageSizes.medium}
|
|
custom={currentIndex}
|
|
initial={{ opacity: 0, x: 300 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
exit={{ opacity: 0, x: -300 }}
|
|
transition={{ duration: 0.3 }}
|
|
className={styles.fullViewImage}
|
|
drag="x"
|
|
onDragEnd={(e, info) => handleSwipe(info.offset.x)}
|
|
>
|
|
<Image
|
|
alt={image.metaData.altText}
|
|
fill
|
|
src={image.imageSizes.medium}
|
|
style={{ objectFit: "cover" }}
|
|
/>
|
|
|
|
<div className={styles.fullViewFooter}>
|
|
{image.metaData.title && (
|
|
<Body color="white">{image.metaData.title}</Body>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
</div>
|
|
|
|
<motion.button
|
|
className={`${styles.navigationButton} ${styles.fullViewPrevButton}`}
|
|
onClick={onPrev}
|
|
>
|
|
<ArrowRightIcon color="burgundy" className={styles.leftTransformIcon} />
|
|
</motion.button>
|
|
<motion.button
|
|
className={`${styles.navigationButton} ${styles.fullViewNextButton}`}
|
|
onClick={onNext}
|
|
>
|
|
<ArrowRightIcon color="burgundy" />
|
|
</motion.button>
|
|
</div>
|
|
)
|
|
}
|