feat(SW-96): Ship reusable desktop lightbox

components/ContentType/HotelPage/data.ts

@@ -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",
+  },
+]

components/ContentType/HotelPage/index.tsx

@@ -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}>