chore(SW-96): move fullview and gallery into own files
This commit is contained in:
Chuma McPhoy
@@ -1,5 +1,5 @@
|
|||||||
import Image from "@/components/Image"
|
import Image from "@/components/Image"
|
||||||
import { Lightbox } from "@/components/Lightbox"
|
import Lightbox from "@/components/Lightbox/"
|
||||||
import Button from "@/components/TempDesignSystem/Button"
|
import Button from "@/components/TempDesignSystem/Button"
|
||||||
import { getIntl } from "@/i18n"
|
import { getIntl } from "@/i18n"
|
||||||
|
|
||||||
|
|||||||
@@ -48,6 +48,7 @@
|
|||||||
grid-row: 1;
|
grid-row: 1;
|
||||||
grid-column: 2;
|
grid-column: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.desktopGrid > :nth-child(3) {
|
.desktopGrid > :nth-child(3) {
|
||||||
grid-row: 2;
|
grid-row: 2;
|
||||||
grid-column: 2;
|
grid-column: 2;
|
||||||
|
|||||||
84
components/Lightbox/FullView.tsx
Normal file
84
components/Lightbox/FullView.tsx
Normal file
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
155
components/Lightbox/Gallery.tsx
Normal file
155
components/Lightbox/Gallery.tsx
Normal file
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,25 +1,16 @@
|
|||||||
"use client"
|
"use client"
|
||||||
import * as Dialog from "@radix-ui/react-dialog"
|
import * as Dialog from "@radix-ui/react-dialog"
|
||||||
import { AnimatePresence, motion } from "framer-motion"
|
import { AnimatePresence, motion } from "framer-motion"
|
||||||
import Image from "next/image"
|
|
||||||
import React, { useState } from "react"
|
import React, { useState } from "react"
|
||||||
|
|
||||||
import { ChevronRightIcon } from "@/components/Icons"
|
import FullView from "./FullView"
|
||||||
import ArrowRightIcon from "@/components/Icons/ArrowRight"
|
import Gallery from "./Gallery"
|
||||||
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 styles from "./Lightbox.module.css"
|
import styles from "./Lightbox.module.css"
|
||||||
|
|
||||||
import {
|
import { LightboxProps } from "@/types/components/lightbox/lightbox"
|
||||||
FullViewProps,
|
|
||||||
GalleryProps,
|
|
||||||
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 [isOpen, setIsOpen] = useState(false)
|
||||||
const [selectedImageIndex, setSelectedImageIndex] = useState(0)
|
const [selectedImageIndex, setSelectedImageIndex] = useState(0)
|
||||||
const [isFullView, setIsFullView] = useState(false)
|
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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user