refactor(SW-96): unify lightbox to handle mobile and desktop

components/ContentType/HotelPage/PreviewImages/index.tsx

@@ -1,11 +1,11 @@
 import Image from "@/components/Image"
-import { DesktopLightbox } from "@/components/Lightbox/Desktop"
+import { Lightbox } from "@/components/Lightbox"
 import Button from "@/components/TempDesignSystem/Button"
 import { getIntl } from "@/i18n"
 
 import styles from "./previewImages.module.css"
 
-import { ImageItem } from "@/types/components/lightbox/desktopLightbox"
+import { ImageItem } from "@/types/components/lightbox/lightbox"
 
 export default async function PreviewImages({
   images,
@@ -14,7 +14,7 @@ export default async function PreviewImages({
 }) {
   const intl = await getIntl()
   return (
-    <DesktopLightbox images={images}>
+    <Lightbox images={images}>
       <div className={styles.desktopGrid}>
         {/*TODO: Replace with images from API once SW-189 is merged. */}
         {images.slice(0, 3).map((image, index) => (
@@ -38,6 +38,6 @@ export default async function PreviewImages({
           {intl.formatMessage({ id: "See all photos" })}
         </Button>
       </div>
-    </DesktopLightbox>
+    </Lightbox>
   )
 }

components/ContentType/HotelPage/data.ts

@@ -3,7 +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"
+import { ImageItem } from "@/types/components/lightbox/lightbox"
 
 const facilityToIconMap: { [key: string]: IconName } = {
   Bar: IconName.Bar,