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>
+  )
+}