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/FullView.tsx
+++ b/components/Lightbox/FullView.tsx
@@ -0,0 +1,84 @@
+"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 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 { FullViewProps } from "@/types/components/lightbox/lightbox"
+
+export default function FullView({
+  image,
+  onClose,
+  onNext,
+  onPrev,
+  currentIndex,
+  totalImages,
+}: FullViewProps) {
+  return (
+    <div className={styles.fullViewContainer}>
+      <Button
+        intent="text"
+        size="small"
+        className={styles.fullViewCloseButton}
+        onClick={onClose}
+      >
+        <ChevronRightIcon
+          color="white"
+          width={32}
+          height={32}
+          className={styles.leftTransformIcon}
+        />
+      </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.url}
+            custom={currentIndex}
+            initial={{ opacity: 0, x: 300 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: -300 }}
+            transition={{ duration: 0.3 }}
+            className={styles.fullViewImage}
+          >
+            <Image
+              src={image.url}
+              alt={image.alt}
+              layout="fill"
+              objectFit="cover"
+            />
+
+            <div className={styles.fullViewFooter}>
+              <Body color="white">{image.alt}</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>
+  )
+}
--- 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>
+  )
+}
--- a/components/Lightbox/index.tsx
+++ b/components/Lightbox/index.tsx
@@ -1,25 +1,16 @@
 "use client"
 import * as Dialog from "@radix-ui/react-dialog"
 import { AnimatePresence, motion } from "framer-motion"
-import Image from "next/image"
 import React, { useState } from "react"

-import { ChevronRightIcon } from "@/components/Icons"
-import ArrowRightIcon from "@/components/Icons/ArrowRight"
-import CloseIcon from "@/components/Icons/Close"
-import Button from "@/components/TempDesignSystem/Button"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
+import FullView from "./FullView"
+import Gallery from "./Gallery"

 import styles from "./Lightbox.module.css"

-import {
-  FullViewProps,
-  GalleryProps,
-  LightboxProps,
-} from "@/types/components/lightbox/lightbox"
+import { LightboxProps } from "@/types/components/lightbox/lightbox"

-export function Lightbox({ images, children }: LightboxProps) {
+export default function Lightbox({ images, children }: LightboxProps) {
  const [isOpen, setIsOpen] = useState(false)
  const [selectedImageIndex, setSelectedImageIndex] = useState(0)
  const [isFullView, setIsFullView] = useState(false)
@@ -119,216 +110,3 @@ export function Lightbox({ images, children }: LightboxProps) {
    </>
  )
 }
-
-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>
-  )
-}
-
-function FullView({
-  image,
-  onClose,
-  onNext,
-  onPrev,
-  currentIndex,
-  totalImages,
-}: FullViewProps) {
-  return (
-    <div className={styles.fullViewContainer}>
-      <Button
-        intent="text"
-        size="small"
-        className={styles.fullViewCloseButton}
-        onClick={onClose}
-      >
-        <ChevronRightIcon
-          color="white"
-          width={32}
-          height={32}
-          className={styles.leftTransformIcon}
-        />
-      </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.url}
-            custom={currentIndex}
-            initial={{ opacity: 0, x: 300 }}
-            animate={{ opacity: 1, x: 0 }}
-            exit={{ opacity: 0, x: -300 }}
-            transition={{ duration: 0.3 }}
-            className={styles.fullViewImage}
-          >
-            <Image
-              src={image.url}
-              alt={image.alt}
-              layout="fill"
-              objectFit="cover"
-            />
-
-            <div className={styles.fullViewFooter}>
-              <Body color="white">{image.alt}</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>
-  )
-}