fc857ad58f
feat(SW-2064): Lightbox updates * chore(SW-2064): add opacity to not selected images * chore(SW-2064): set main image as the first image in thumbnail * chore(SW-2064): disable navigation buttons on first and last image * fix(SW-2064): use cx * Revert "chore(SW-2064): disable navigation buttons on first and last image" This reverts commit 9c5acd8a02b83740f35d1cfa88bfba6b006ba947. * refactor(SW-2064): create ImageCounter component * refactor(SW-2064) * chore(SW-2064): add enter keu down on main image Approved-by: Erik Tiekstra
58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
"use client"
|
|
import { motion } from "motion/react"
|
|
|
|
import Image from "../../Image"
|
|
import { LightboxImage } from ".."
|
|
import styles from "./gallery.module.css"
|
|
import { useIntl } from "react-intl"
|
|
import { cx } from "class-variance-authority"
|
|
import { Button as ButtonRAC } from "react-aria-components"
|
|
import { memo } from "react"
|
|
|
|
interface ThumbnailImage {
|
|
image: LightboxImage
|
|
index: number
|
|
onSelect: (image: LightboxImage) => void
|
|
isMainImage?: boolean
|
|
className?: string
|
|
}
|
|
export const ThumbnailImage = memo(function ThumbnailImage({
|
|
image,
|
|
index,
|
|
onSelect,
|
|
isMainImage = false,
|
|
className,
|
|
}: ThumbnailImage) {
|
|
const intl = useIntl()
|
|
return (
|
|
<motion.div
|
|
key={image.src}
|
|
className={styles.thumbnailContainer}
|
|
initial={{ opacity: 0, x: 50 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
exit={{ opacity: 0, x: -50 }}
|
|
transition={{ duration: 0.2, delay: index * 0.05 }}
|
|
>
|
|
<ButtonRAC
|
|
className={styles.imageButton}
|
|
onPress={() => onSelect(image)}
|
|
aria-label={intl.formatMessage({
|
|
id: "lightbox.openImage",
|
|
defaultMessage: "Open image",
|
|
})}
|
|
>
|
|
<Image
|
|
src={image.src}
|
|
alt={image.alt}
|
|
fill
|
|
sizes="200px"
|
|
className={cx(styles.image, className, {
|
|
[styles.notActiveImage]: !isMainImage,
|
|
[styles.activeImage]: isMainImage,
|
|
})}
|
|
/>
|
|
</ButtonRAC>
|
|
</motion.div>
|
|
)
|
|
})
|