chore(SW-96): abstract preview images out of hotelpage component

components/ContentType/HotelPage/PreviewImages/index.tsx

@@ -0,0 +1,43 @@
+import Image from "@/components/Image"
+import { DesktopLightbox } from "@/components/Lightbox/Desktop"
+import Button from "@/components/TempDesignSystem/Button"
+import { getIntl } from "@/i18n"
+
+import styles from "./previewImages.module.css"
+
+import { ImageItem } from "@/types/components/lightbox/desktopLightbox"
+
+export default async function PreviewImages({
+  images,
+}: {
+  images: ImageItem[]
+}) {
+  const intl = await getIntl()
+  return (
+    <DesktopLightbox images={images}>
+      <div className={styles.desktopGrid}>
+        {/*TODO: Replace with images from API once SW-189 is merged. */}
+        {images.slice(0, 3).map((image, index) => (
+          <Image
+            key={index}
+            src={image.url}
+            alt={image.alt}
+            width={index === 0 ? 752 : 292}
+            height={index === 0 ? 540 : 266}
+            objectFit="cover"
+            className={styles.baseImage}
+          />
+        ))}
+        <Button
+          theme="base"
+          intent="inverted"
+          size="small"
+          id="lightboxTrigger"
+          className={styles.seeAllButton}
+        >
+          {intl.formatMessage({ id: "See all photos" })}
+        </Button>
+      </div>
+    </DesktopLightbox>
+  )
+}

components/ContentType/HotelPage/PreviewImages/previewImages.module.css

@@ -0,0 +1,47 @@
+.desktopGrid {
+  display: none;
+}
+
+@media screen and (min-width: 1367px) {
+  .desktopGrid {
+    display: grid;
+    grid-template-columns: 72% 28%;
+    grid-template-rows: repeat(2, 1fr);
+    gap: 8px;
+    position: relative;
+    width: 100%;
+    padding-top: var(--Spacing-x2);
+    background-color: var(--Base-Surface-Subtle-Normal);
+  }
+
+  .desktopGrid > :first-child {
+    grid-row: 1 / span 2;
+    height: 100%;
+  }
+
+  .desktopGrid > :nth-child(2) {
+    grid-row: 1;
+    grid-column: 2;
+  }
+  .desktopGrid > :nth-child(3) {
+    grid-row: 2;
+    grid-column: 2;
+  }
+
+  .seeAllButton {
+    position: absolute;
+    bottom: var(--Spacing-x2);
+    right: var(--Spacing-x4);
+    z-index: 1;
+    display: block;
+  }
+
+  .baseImage {
+    cursor: pointer;
+    object-fit: cover;
+    border-radius: var(--Corner-radius-Medium);
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}

components/ContentType/HotelPage/hotelPage.module.css

@@ -7,11 +7,6 @@
   padding-right: var(--Spacing-x3);
 }
 
-.desktopGrid,
-.seeAllButton {
-  display: none;
-}
-
 .mainSection {
   display: grid;
   gap: var(--Spacing-x9);
@@ -39,46 +34,4 @@
     gap: var(--Spacing-x9);
     grid-template-columns: 607px 340px;
   }
-
-  .desktopGrid {
-    display: grid;
-    grid-template-columns: 72% 28%;
-    grid-template-rows: repeat(2, 1fr);
-    gap: 8px;
-    position: relative;
-    width: 100%;
-    padding-top: var(--Spacing-x2);
-    background-color: var(--Base-Surface-Subtle-Normal);
-  }
-
-  .desktopGrid > :first-child {
-    grid-row: 1 / span 2;
-    height: 100%;
-  }
-
-  .desktopGrid > :nth-child(2) {
-    grid-row: 1;
-    grid-column: 2;
-  }
-  .desktopGrid > :nth-child(3) {
-    grid-row: 2;
-    grid-column: 2;
-  }
-
-  .seeAllButton {
-    position: absolute;
-    bottom: var(--Spacing-x4);
-    right: var(--Spacing-x4);
-    z-index: 1;
-    display: block;
-  }
-
-  .baseImage {
-    cursor: pointer;
-    object-fit: cover;
-    border-radius: var(--Corner-radius-Medium);
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
 }

components/ContentType/HotelPage/index.tsx

@@ -1,15 +1,12 @@
-import Image from "next/image"
-
 import { serverClient } from "@/lib/trpc/server"
 
 import { MOCK_FACILITIES } from "./Facilities/mockData"
 import Facilities from "./Facilities"
-import { DesktopLightbox } from "@/components/Lightbox/Desktop"
-import Button from "@/components/TempDesignSystem/Button"
 
 import AmenitiesList from "./AmenitiesList"
 import { tempHotelLightboxImage } from "./data"
 import IntroSection from "./IntroSection"
+import PreviewImages from "./PreviewImages"
 import { Rooms } from "./Rooms"
 import SidePeeks from "./SidePeeks"
 import TabNavigation from "./TabNavigation"
@@ -27,31 +24,7 @@ export default async function HotelPage() {
 
   return (
     <div className={styles.pageContainer}>
-      <DesktopLightbox images={tempHotelLightboxImage}>
+      <PreviewImages images={tempHotelLightboxImage} />
-        <div className={styles.desktopGrid}>
-          {/*TODO: Replace with images from API once SW-189 is merged. */}
-          {tempHotelLightboxImage.slice(0, 3).map((image, index) => (
-            <Image
-              key={index}
-              src={image.url}
-              alt={image.alt}
-              width={index === 0 ? 752 : 292}
-              height={index === 0 ? 540 : 266}
-              objectFit="cover"
-              className={styles.baseImage}
-            />
-          ))}
-        </div>
-        <Button
-          theme="base"
-          intent="inverted"
-          size="small"
-          id="lightboxTrigger"
-          className={styles.seeAllButton}
-        >
-          See all photos
-        </Button>
-      </DesktopLightbox>
       <TabNavigation />
       <main className={styles.mainSection}>
         <div className={styles.introContainer}>