feat(SW-96): Ship reusable desktop lightbox
This commit is contained in:
Chuma McPhoy
@@ -3,6 +3,7 @@ import { FC } from "react"
|
||||
import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
|
||||
|
||||
import { IconName, IconProps } from "@/types/components/icon"
|
||||
import { ImageItem } from "@/types/components/lightbox/desktopLightbox"
|
||||
|
||||
const facilityToIconMap: { [key: string]: IconName } = {
|
||||
Bar: IconName.Bar,
|
||||
@@ -21,3 +22,44 @@ export function mapFacilityToIcon(facilityName: string): FC<IconProps> | null {
|
||||
const iconName = facilityToIconMap[facilityName]
|
||||
return getIconByIconName(iconName) || null
|
||||
}
|
||||
|
||||
/**
|
||||
* NOTE:
|
||||
* Images from the test API are hosted on test3.scandichotels.com,
|
||||
* which can't be accessed unless on Scandic's Wifi or using Citrix.
|
||||
* So I've added some placeholder images here for use when running the app locally.
|
||||
*/
|
||||
export const tempHotelLightboxImage: ImageItem[] = [
|
||||
{
|
||||
url: "https://www.scandichotels.com/imagevault/publishedmedia/kd4e35n41mrqinfrkzok/scandic-continental-entrance-vasagatan.jpg",
|
||||
alt: "Hotel entrance",
|
||||
},
|
||||
{
|
||||
url: "https://www.scandichotels.com/imageVault/publishedmedia/ip4a2rc93qda3aq9ph73/scandic-continental-room-standard.jpg",
|
||||
alt: "Standard room",
|
||||
},
|
||||
{
|
||||
url: "https://www.scandichotels.com/imageVault/publishedmedia/75y2b2x8uvma4s7zvy50/scandic-continental-room-juniorsuite-detail-1.jpg",
|
||||
alt: "Junior suite",
|
||||
},
|
||||
{
|
||||
url: "https://www.scandichotels.com/imageVault/publishedmedia/pwotq99pbr68djxnym4a/scandic-continental-diningroom-themarket.jpg",
|
||||
alt: "Dining room, The Market",
|
||||
},
|
||||
{
|
||||
url: "https://www.scandichotels.com/imageVault/publishedmedia/yc2cjoxq2j01gp0f80gt/scandic-continental-room-juniorsuite-bathroom-1.jpg",
|
||||
alt: "Junior suite bathroom",
|
||||
},
|
||||
{
|
||||
url: "https://www.scandichotels.com/imageVault/publishedmedia/xocam1f69h7lh57u8f9v/scandic-continental-themarket-detail.jpg",
|
||||
alt: "The Market detail",
|
||||
},
|
||||
{
|
||||
url: "https://www.scandichotels.com/imageVault/publishedmedia/0nnwt72vwzfvkkx5whf0/scandic-continental-caldo.jpg",
|
||||
alt: "Caldo",
|
||||
},
|
||||
{
|
||||
url: "https://www.scandichotels.com/imageVault/publishedmedia/mg9bbtbumfxbfjhovk2e/Scandic_Continental_Capitol_The_View_6.jpg",
|
||||
alt: "Rooftop bar",
|
||||
},
|
||||
]
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
import { serverClient } from "@/lib/trpc/server"
|
||||
|
||||
import { MOCK_FACILITIES } from "./Facilities/mockData"
|
||||
import AmenitiesList from "./AmenitiesList"
|
||||
import Facilities from "./Facilities"
|
||||
import { DesktopLightbox } from "@/components/Lightbox/Desktop"
|
||||
|
||||
import AmenitiesList from "./AmenitiesList"
|
||||
import { tempHotelLightboxImage } from "./data"
|
||||
import IntroSection from "./IntroSection"
|
||||
import { Rooms } from "./Rooms"
|
||||
import SidePeeks from "./SidePeeks"
|
||||
@@ -21,6 +24,10 @@ export default async function HotelPage() {
|
||||
|
||||
return (
|
||||
<div className={styles.pageContainer}>
|
||||
<DesktopLightbox images={tempHotelLightboxImage}>
|
||||
<button id="lightboxTrigger">Open Lightbox</button>
|
||||
<button>noope</button>
|
||||
</DesktopLightbox>
|
||||
<TabNavigation />
|
||||
<main className={styles.mainSection}>
|
||||
<div className={styles.introContainer}>
|
||||
|
||||
@@ -0,0 +1,157 @@
|
||||
.content {
|
||||
background-color: white;
|
||||
border-radius: 6px;
|
||||
box-shadow:
|
||||
hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
|
||||
hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 1090px;
|
||||
height: 725px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.galleryContainer {
|
||||
padding: var(--Spacing-x5) var(--Spacing-x6);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.closeButton {
|
||||
position: absolute;
|
||||
top: var(--Spacing-x-one-and-half);
|
||||
right: var(--Spacing-x-half);
|
||||
}
|
||||
|
||||
.backButton {
|
||||
position: absolute;
|
||||
top: var(--Spacing-x-one-and-half);
|
||||
left: var(--Spacing-x-half);
|
||||
}
|
||||
|
||||
.galleryHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--Spacing-x1);
|
||||
}
|
||||
|
||||
.imageCaption {
|
||||
background-color: #f0f0f0;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.mainImageContainer {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.mainImageContainer img,
|
||||
.thumbnailContainer img {
|
||||
border-radius: var(--Corner-radius-Small);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.thumbnailGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.thumbnailContainer {
|
||||
position: relative;
|
||||
height: 125px;
|
||||
}
|
||||
|
||||
.fullViewContainer {
|
||||
background-color: var(--UI-Text-High-contrast);
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
padding: var(--Spacing-x5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fullViewHeader {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--Spacing-x5);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fullViewImageContainer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 1054px;
|
||||
height: 700px;
|
||||
margin-bottom: var(--Spacing-x5);
|
||||
}
|
||||
|
||||
.fullViewImage {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.fullViewFooter {
|
||||
width: 100%;
|
||||
max-width: 1054px;
|
||||
text-align: left;
|
||||
padding-left: 116px;
|
||||
}
|
||||
|
||||
.imagePosition {
|
||||
background-color: var(--UI-Grey-90);
|
||||
padding: var(--Spacing-x-quarter) var(--Spacing-x-half);
|
||||
border-radius: var(--Corner-radius-Small);
|
||||
}
|
||||
|
||||
.fullViewImageContainer img {
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navigationButton {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: var(--Base-Button-Inverted-Fill-Normal);
|
||||
border-radius: 50%;
|
||||
padding: var(--Spacing-x1);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navigationButton:hover {
|
||||
background-color: var(--Base-Button-Inverted-Fill-Hover);
|
||||
}
|
||||
|
||||
.prevButton {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.leftTransformIcon {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.nextButton {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.portraitImage {
|
||||
max-width: 548px;
|
||||
}
|
||||
@@ -0,0 +1,249 @@
|
||||
"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 styles from "./desktopLightbox.module.css"
|
||||
|
||||
import {
|
||||
DesktopLightboxProps,
|
||||
FullViewProps,
|
||||
GalleryProps,
|
||||
} from "@/types/components/lightbox/desktopLightbox"
|
||||
|
||||
export function DesktopLightbox({ images, children }: DesktopLightboxProps) {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const [selectedImageIndex, setSelectedImageIndex] = useState(0)
|
||||
const [isFullView, setIsFullView] = useState(false)
|
||||
|
||||
const handleOpenChange = (open: boolean) => {
|
||||
if (!open) {
|
||||
setTimeout(() => {
|
||||
setIsOpen(false)
|
||||
setSelectedImageIndex(0)
|
||||
setIsFullView(false)
|
||||
}, 300) // 300ms delay
|
||||
} else {
|
||||
setIsOpen(true)
|
||||
}
|
||||
}
|
||||
|
||||
const handleNext = () => {
|
||||
setSelectedImageIndex((prevIndex) => (prevIndex + 1) % images.length)
|
||||
}
|
||||
|
||||
const handlePrev = () => {
|
||||
setSelectedImageIndex(
|
||||
(prevIndex) => (prevIndex - 1 + images.length) % images.length
|
||||
)
|
||||
}
|
||||
|
||||
const triggerElement = React.Children.map(children, (child) => {
|
||||
if (React.isValidElement(child) && child.props.id === "lightboxTrigger") {
|
||||
return React.cloneElement(child, {
|
||||
onClick: () => setIsOpen(true),
|
||||
} as React.HTMLAttributes<HTMLElement>)
|
||||
}
|
||||
return child
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
{triggerElement}
|
||||
<Dialog.Root open={isOpen} onOpenChange={handleOpenChange}>
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<Dialog.Portal forceMount>
|
||||
<Dialog.Overlay asChild>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className={styles.overlay}
|
||||
/>
|
||||
</Dialog.Overlay>
|
||||
<Dialog.Content className={styles.content}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
{isFullView ? (
|
||||
<FullView
|
||||
image={images[selectedImageIndex]}
|
||||
onClose={() => setIsFullView(false)}
|
||||
onNext={handleNext}
|
||||
onPrev={handlePrev}
|
||||
currentIndex={selectedImageIndex}
|
||||
totalImages={images.length}
|
||||
/>
|
||||
) : (
|
||||
<Gallery
|
||||
images={images}
|
||||
onClose={() => setIsOpen(false)}
|
||||
onSelectImage={(image) => {
|
||||
setSelectedImageIndex(
|
||||
images.findIndex((img) => img.url === image.url)
|
||||
)
|
||||
}}
|
||||
onImageClick={() => setIsFullView(true)}
|
||||
selectedImage={images[selectedImageIndex]}
|
||||
/>
|
||||
)}
|
||||
</motion.div>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</Dialog.Root>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.galleryContainer}>
|
||||
<Button
|
||||
intent="text"
|
||||
size="small"
|
||||
theme="base"
|
||||
className={styles.closeButton}
|
||||
onClick={onClose}
|
||||
>
|
||||
<CloseIcon width={32} height={32} />
|
||||
</Button>
|
||||
<div className={styles.galleryHeader}>
|
||||
<div className={styles.imageCaption}>
|
||||
<Caption color="textMediumContrast">{mainImage.alt}</Caption>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.mainImageContainer}>
|
||||
<Image
|
||||
src={mainImage.url}
|
||||
alt={mainImage.alt}
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
onClick={onImageClick}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.thumbnailGrid}>
|
||||
{getThumbImages().map((image, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
className={styles.thumbnailContainer}
|
||||
onClick={() => onSelectImage(image)}
|
||||
>
|
||||
<Image
|
||||
src={image.url}
|
||||
alt={image.alt}
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function FullView({
|
||||
image,
|
||||
onClose,
|
||||
onNext,
|
||||
onPrev,
|
||||
currentIndex,
|
||||
totalImages,
|
||||
}: FullViewProps) {
|
||||
return (
|
||||
<div className={styles.fullViewContainer}>
|
||||
<Button
|
||||
intent="text"
|
||||
size="small"
|
||||
className={styles.backButton}
|
||||
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="contain"
|
||||
/>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
<motion.button
|
||||
className={`${styles.navigationButton} ${styles.prevButton}`}
|
||||
onClick={onPrev}
|
||||
>
|
||||
<ArrowRightIcon
|
||||
color="burgundy"
|
||||
className={styles.leftTransformIcon}
|
||||
/>
|
||||
</motion.button>
|
||||
<motion.button
|
||||
className={`${styles.navigationButton} ${styles.nextButton}`}
|
||||
onClick={onNext}
|
||||
>
|
||||
<ArrowRightIcon color="burgundy" />
|
||||
</motion.button>
|
||||
</div>
|
||||
<div className={styles.fullViewFooter}>
|
||||
<Body color="white">{image.alt}</Body>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user