feat(SW-842): Some refactoring regarding room card

components/ImageGallery/imageGallery.module.css

@@ -0,0 +1,42 @@
+.imageCount {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  max-height: 32px;
+  width: 48px;
+  background-color: rgba(0, 0, 0, 0.6);
+  padding: var(--Spacing-x-quarter) var(--Spacing-x-half);
+  border-radius: var(--Corner-radius-Small);
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x-quarter);
+}
+
+.triggerArea {
+  display: flex;
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+}
+
+.image {
+  width: 100%;
+  object-fit: cover;
+}
+
+.imagePlaceholder {
+  height: 100%;
+  min-height: 190px;
+  width: 100%;
+  background-color: #fff;
+  background-image: linear-gradient(45deg, #000000 25%, transparent 25%),
+    linear-gradient(-45deg, #000000 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #000000 75%),
+    linear-gradient(-45deg, transparent 75%, #000000 75%);
+  background-size: 160px 160px;
+  background-position:
+    0 0,
+    0 80px,
+    80px -80px,
+    -80px 0;
+}

components/ImageGallery/index.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import { useState } from "react"
+
+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/imageGallery"
+
+export default function ImageGallery({
+  images,
+  title,
+  fill,
+  height = 280,
+}: ImageGalleryProps) {
+  const [lightboxIsOpen, setLightboxIsOpen] = useState(false)
+  const imageProps = fill ? { fill } : { height, width: height * 1.5 }
+
+  if (!images || images.length === 0) {
+    return <div className={styles.imagePlaceholder} />
+  }
+
+  return (
+    <>
+      <div
+        className={styles.triggerArea}
+        role="button"
+        onClick={() => setLightboxIsOpen(true)}
+      >
+        <Image
+          className={styles.image}
+          src={images[0].imageSizes.medium}
+          alt={images[0].metaData.altText}
+          {...imageProps}
+        />
+        <div className={styles.imageCount}>
+          <GalleryIcon color="white" />
+          <Footnote color="white" type="label">
+            {images.length}
+          </Footnote>
+        </div>
+      </div>
+      <Lightbox
+        images={images}
+        dialogTitle={title}
+        isOpen={lightboxIsOpen}
+        onClose={() => setLightboxIsOpen(false)}
+      />
+    </>
+  )
+}