feat(sw-343) added buttons to open map in mobile

components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css

@@ -0,0 +1,9 @@
+.hotelListing {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .hotelListing {
+    display: block;
+  }
+}

components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/index.tsx

@@ -1,5 +1,7 @@
 "use client"
 
+import styles from "./hotelListing.module.css"
+
 import { HotelListingProps } from "@/types/components/hotelReservation/selectHotel/map"
 
 // TODO: This component is copied from
@@ -7,5 +9,5 @@ import { HotelListingProps } from "@/types/components/hotelReservation/selectHot
 // Look at that for inspiration on how to do the interaction with the map.
 
 export default function HotelListing({}: HotelListingProps) {
-  return <section>Hotel listing TBI</section>
+  return <section className={styles.hotelListing}>Hotel listing TBI</section>
 }

components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx

@@ -43,6 +43,22 @@ export default function SelectHotelMap({
   )
   return (
     <APIProvider apiKey={apiKey}>
+      <div className={styles.filterContainer}>
+        <Button
+          asChild
+          intent="text"
+          size="small"
+          theme="base"
+          variant="icon"
+          wrapping
+        >
+          <Link href={selectHotel[lang]} keepSearchParams color="burgundy">
+            <CloseIcon color="burgundy" width={32} height={32} />
+          </Link>
+        </Button>
+        <span>Filter and sort</span>
+        {/* TODO: Add filter and sort button */}
+      </div>
       <HotelListing />
       <InteractiveMap
         closeButton={closeButton}

components/HotelReservation/SelectHotel/SelectHotelMap/selectHotelMap.module.css

@@ -2,4 +2,27 @@
   pointer-events: initial;
   box-shadow: var(--button-box-shadow);
   gap: var(--Spacing-x-half);
+  display: none !important;
+}
+
+.filterContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  background-color: var(--Base-Surface-Secondary-light-Normal);
+  padding: 0 var(--Spacing-x2);
+}
+
+@media (min-width: 768px) {
+  .closeButton {
+    display: flex !important;
+  }
+  .filterContainer {
+    display: none;
+  }
 }