chore(SW-96): move fullview and gallery into own files

2024-08-21 11:13:38 +02:00
parent 1fadc76ef0
commit f97e521502
5 changed files with 245 additions and 227 deletions
--- a/components/Lightbox/Gallery.tsx
+++ b/components/Lightbox/Gallery.tsx
@@ -0,0 +1,155 @@
+"use client"
+import { AnimatePresence, motion } from "framer-motion"
+import Image from "next/image"
+
+import { ChevronRightIcon } from "@/components/Icons"
+import ArrowRightIcon from "@/components/Icons/ArrowRight"
+import CloseIcon from "@/components/Icons/Close"
+import Button from "@/components/TempDesignSystem/Button"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import styles from "./Lightbox.module.css"
+
+import { GalleryProps } from "@/types/components/lightbox/lightbox"
+
+export default function Gallery({
+  images,
+  onClose,
+  onSelectImage,
+  onImageClick,
+  selectedImage,
+}: GalleryProps) {
+  const mainImage = selectedImage || images[0]
+  const mainImageIndex = images.findIndex((img) => img.url === mainImage.url)
+
+  function getThumbImages() {
+    const thumbs = []
+    for (let i = 1; i <= 5; i++) {
+      const index = (mainImageIndex + i) % images.length
+      thumbs.push(images[index])
+    }
+    return thumbs
+  }
+
+  const handleNext = () => {
+    const nextIndex = (mainImageIndex + 1) % images.length
+    onSelectImage(images[nextIndex])
+  }
+
+  const handlePrev = () => {
+    const prevIndex = (mainImageIndex - 1 + images.length) % images.length
+    onSelectImage(images[prevIndex])
+  }
+
+  return (
+    <div className={styles.galleryContainer}>
+      <Button
+        intent="text"
+        size="small"
+        theme="base"
+        className={styles.desktopGalleryCloseButton}
+        onClick={onClose}
+      >
+        <CloseIcon width={32} height={32} />
+      </Button>
+      {/* Desktop Gallery */}
+      <div className={styles.desktopGallery}>
+        <div className={styles.galleryHeader}>
+          <div className={styles.imageCaption}>
+            <Caption color="textMediumContrast">{mainImage.alt}</Caption>
+          </div>
+        </div>
+        <div className={styles.mainImageWrapper}>
+          <AnimatePresence initial={false} mode="wait">
+            <motion.div
+              key={mainImage.url}
+              className={styles.mainImageContainer}
+              initial={{ opacity: 0, x: 300 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: -300 }}
+              transition={{ duration: 0.3 }}
+            >
+              <Image
+                src={mainImage.url}
+                alt={mainImage.alt}
+                layout="fill"
+                objectFit="cover"
+                onClick={onImageClick}
+              />
+            </motion.div>
+          </AnimatePresence>
+          <motion.button
+            className={`${styles.navigationButton} ${styles.galleryPrevButton}`}
+            onClick={handlePrev}
+          >
+            <ArrowRightIcon
+              color="burgundy"
+              className={styles.leftTransformIcon}
+            />
+          </motion.button>
+          <motion.button
+            className={`${styles.navigationButton} ${styles.galleryNextButton}`}
+            onClick={handleNext}
+          >
+            <ArrowRightIcon color="burgundy" />
+          </motion.button>
+        </div>
+        <div className={styles.thumbnailGrid}>
+          <AnimatePresence initial={false}>
+            {getThumbImages().map((image, index) => (
+              <motion.div
+                key={image.url}
+                className={styles.thumbnailContainer}
+                onClick={() => onSelectImage(image)}
+                initial={{ opacity: 0, x: 50 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -50 }}
+                transition={{ duration: 0.2, delay: index * 0.05 }}
+              >
+                <Image
+                  src={image.url}
+                  alt={image.alt}
+                  layout="fill"
+                  objectFit="cover"
+                />
+              </motion.div>
+            ))}
+          </AnimatePresence>
+        </div>
+      </div>
+
+      {/* Mobile Gallery */}
+      <div className={styles.mobileGallery}>
+        <Button intent="text" size="small" onClick={onClose}>
+          <ChevronRightIcon
+            color="black"
+            width={32}
+            height={32}
+            className={styles.leftTransformIcon}
+          />
+        </Button>
+        <div className={styles.mobileGalleryContent}>
+          <div className={styles.thumbnailGrid}>
+            {images.map((image, index) => (
+              <motion.div
+                key={image.url}
+                className={`${styles.thumbnailContainer} ${index % 3 === 0 ? styles.fullWidthImage : ""}`}
+                onClick={() => onImageClick()}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.3, delay: index * 0.05 }}
+              >
+                <Image
+                  src={image.url}
+                  alt={image.alt}
+                  layout="fill"
+                  objectFit="cover"
+                />
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}