748021cdab
Feat/SW-673 galleryicon hotel lightbox * feat(SW-673): add galleryChip to trigger lightbox * feat(SW-673): add updated design galleryIcon * feat(SW-673): add first image from hotelContent and heroImages * feat(SW-673): fix import type * feat(SW-673): fix css variables * feat(SW-673): change component to include image that trigger lightbox * feat(SW-673): refactor name to imageGallery Approved-by: Niclas Edenvin
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import { GalleryIcon } from "@/components/Icons"
|
|
import Image from "@/components/Image"
|
|
import Lightbox from "@/components/Lightbox"
|
|
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
|
|
|
|
import styles from "./imageGallery.module.css"
|
|
|
|
import type { ImageGalleryProps } from "@/types/components/hotelReservation/selectRate/imageGallery"
|
|
|
|
export default function ImageGallery({ images, title }: ImageGalleryProps) {
|
|
return (
|
|
<Lightbox
|
|
images={images.map((image) => ({
|
|
url: image.imageSizes.small,
|
|
alt: image.metaData.altText,
|
|
title: image.metaData.title,
|
|
}))}
|
|
dialogTitle={title}
|
|
>
|
|
<div className={styles.triggerArea} id="lightboxTrigger">
|
|
<Image
|
|
src={images[0].imageSizes.medium}
|
|
alt={images[0].metaData.altText}
|
|
className={styles.image}
|
|
fill
|
|
/>
|
|
<div className={styles.galleryIcon}>
|
|
<GalleryIcon color="white" />
|
|
<Footnote color="white" type="label">
|
|
{images.length}
|
|
</Footnote>
|
|
</div>
|
|
</div>
|
|
</Lightbox>
|
|
)
|
|
}
|