From f97e5215027f2e2310f741c43496193148c2d9a5 Mon Sep 17 00:00:00 2001 From: Chuma McPhoy Date: Wed, 21 Aug 2024 11:13:38 +0200 Subject: [PATCH] chore(SW-96): move fullview and gallery into own files --- .../HotelPage/PreviewImages/index.tsx | 2 +- .../PreviewImages/previewImages.module.css | 1 + components/Lightbox/FullView.tsx | 84 +++++++ components/Lightbox/Gallery.tsx | 155 ++++++++++++ components/Lightbox/index.tsx | 230 +----------------- 5 files changed, 245 insertions(+), 227 deletions(-) create mode 100644 components/Lightbox/FullView.tsx create mode 100644 components/Lightbox/Gallery.tsx diff --git a/components/ContentType/HotelPage/PreviewImages/index.tsx b/components/ContentType/HotelPage/PreviewImages/index.tsx index 124118b37..d759c0524 100644 --- a/components/ContentType/HotelPage/PreviewImages/index.tsx +++ b/components/ContentType/HotelPage/PreviewImages/index.tsx @@ -1,5 +1,5 @@ import Image from "@/components/Image" -import { Lightbox } from "@/components/Lightbox" +import Lightbox from "@/components/Lightbox/" import Button from "@/components/TempDesignSystem/Button" import { getIntl } from "@/i18n" diff --git a/components/ContentType/HotelPage/PreviewImages/previewImages.module.css b/components/ContentType/HotelPage/PreviewImages/previewImages.module.css index 8d663aac3..04810b3e1 100644 --- a/components/ContentType/HotelPage/PreviewImages/previewImages.module.css +++ b/components/ContentType/HotelPage/PreviewImages/previewImages.module.css @@ -48,6 +48,7 @@ grid-row: 1; grid-column: 2; } + .desktopGrid > :nth-child(3) { grid-row: 2; grid-column: 2; diff --git a/components/Lightbox/FullView.tsx b/components/Lightbox/FullView.tsx new file mode 100644 index 000000000..2410a8b47 --- /dev/null +++ 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 ( +
+ +
+ + + {`${currentIndex + 1} / ${totalImages}`} + + +
+
+ + + {image.alt} + +
+ {image.alt} +
+ + +
+ + + + + + + +
+ ) +} diff --git a/components/Lightbox/Gallery.tsx b/components/Lightbox/Gallery.tsx new file mode 100644 index 000000000..c0921ba7c --- /dev/null +++ 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 ( +
+ + {/* Desktop Gallery */} +
+
+
+ {mainImage.alt} +
+
+
+ + + {mainImage.alt} + + + + + + + + +
+
+ + {getThumbImages().map((image, index) => ( + 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.alt} + + ))} + +
+
+ + {/* Mobile Gallery */} +
+ +
+
+ {images.map((image, index) => ( + onImageClick()} + initial={{ opacity: 0, y: 20 }} + animate={{ opacity: 1, y: 0 }} + transition={{ duration: 0.3, delay: index * 0.05 }} + > + {image.alt} + + ))} +
+
+
+
+ ) +} diff --git a/components/Lightbox/index.tsx b/components/Lightbox/index.tsx index 614405467..95709d2ad 100644 --- 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 ( -
- - {/* Desktop Gallery */} -
-
-
- {mainImage.alt} -
-
-
- - - {mainImage.alt} - - - - - - - - -
-
- - {getThumbImages().map((image, index) => ( - 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.alt} - - ))} - -
-
- - {/* Mobile Gallery */} -
- -
-
- {images.map((image, index) => ( - onImageClick()} - initial={{ opacity: 0, y: 20 }} - animate={{ opacity: 1, y: 0 }} - transition={{ duration: 0.3, delay: index * 0.05 }} - > - {image.alt} - - ))} -
-
-
-
- ) -} - -function FullView({ - image, - onClose, - onNext, - onPrev, - currentIndex, - totalImages, -}: FullViewProps) { - return ( -
- -
- - - {`${currentIndex + 1} / ${totalImages}`} - - -
-
- - - {image.alt} - -
- {image.alt} -
- - -
- - - - - - - -
- ) -}