Merged develop into feat/hotel-page-tab-navigation

app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.module.css

@@ -1,12 +1,19 @@
 .main {
   display: grid;
-  grid-template-columns: repeat(3, minmax(min-content, max-content));
+  grid-template-columns: repeat(2, minmax(min-content, max-content));
+  gap: var(--Spacing-x4);
   padding: var(--Spacing-x4) var(--Spacing-x4) 0 var(--Spacing-x4);
   height: 100dvh;
   background-color: var(--Scandic-Brand-Warm-White);
 }
 
-.section {
+.hotelCards {
   display: grid;
   gap: var(--Spacing-x4);
 }
+
+.link {
+  display: flex;
+  align-items: center;
+  padding: var(--Spacing-x2) var(--Spacing-x0);
+}

app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx

@@ -2,6 +2,10 @@ import { serverClient } from "@/lib/trpc/server"
 
 import HotelCard from "@/components/HotelReservation/HotelCard"
 import HotelFilter from "@/components/HotelReservation/SelectHotel/HotelFilter"
+import { ChevronRightIcon } from "@/components/Icons"
+import StaticMap from "@/components/Maps/StaticMap"
+import Link from "@/components/TempDesignSystem/Link"
+import { getIntl } from "@/i18n"
 
 import styles from "./page.module.css"
 
@@ -10,6 +14,8 @@ import { LangParams, PageArgs } from "@/types/params"
 export default async function SelectHotelPage({
   params,
 }: PageArgs<LangParams>) {
+  const intl = await getIntl()
+
   const { attributes } = await serverClient().hotel.getHotel({
     hotelId: "d98c7ab1-ebaa-4102-b351-758daf1ddf55",
     language: params.lang,
@@ -20,10 +26,30 @@ export default async function SelectHotelPage({
     hotelId: "d98c7ab1-ebaa-4102-b351-758daf1ddf55",
   })
 
+  const tempSearchTerm = "Stockholm"
+
   return (
     <main className={styles.main}>
-      <HotelFilter filters={hotelFilters} />
-      <section className={styles.section}>
+      <section>
+        <StaticMap
+          city={tempSearchTerm}
+          width={340}
+          height={180}
+          zoomLevel={11}
+          mapType="roadmap"
+        />
+        <Link
+          className={styles.link}
+          color="burgundy"
+          variant="underscored"
+          href="#"
+        >
+          {intl.formatMessage({ id: "Show map" })}
+          <ChevronRightIcon color="burgundy" className={styles.icon} />
+        </Link>
+        <HotelFilter filters={hotelFilters} />
+      </section>
+      <section className={styles.hotelCards}>
         {hotels.map((hotel) => (
           <HotelCard key={hotel.name} hotel={hotel} />
         ))}