feat(SW-341): add hotels listing sidepeeks

components/HotelReservation/ReadMore/Contact/contact.module.css

@@ -0,0 +1,48 @@
+.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto;
+  gap: var(--Spacing-x2);
+  font-family: var(--typography-Body-Regular-fontFamily);
+}
+
+.address,
+.contactInfo {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-template-rows: subgrid;
+  grid-column: 1 / 3;
+  grid-row: 1 / 4;
+}
+
+.contactInfo > li {
+  font-style: normal;
+  list-style-type: none;
+  display: flex;
+  flex-direction: column;
+}
+
+.heading {
+  font-weight: 500;
+}
+
+.soMeIcons {
+  display: flex;
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.ecoLabel {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: var(--Spacing-x-one-and-half);
+  grid-column: 2 / 3;
+  grid-row: 3 / 4;
+  font-size: var(--typography-Footnote-Regular-fontSize);
+  line-height: ();
+}
+
+.ecoLabelText {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}

components/HotelReservation/ReadMore/Contact/index.tsx

@@ -0,0 +1,85 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import FacebookIcon from "@/components/Icons/Facebook"
+import InstagramIcon from "@/components/Icons/Instagram"
+import Image from "@/components/Image"
+import Link from "@/components/TempDesignSystem/Link"
+import useLang from "@/hooks/useLang"
+
+import styles from "./contact.module.css"
+
+import { ContactProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
+
+export default function Contact({ hotel }: ContactProps) {
+  const lang = useLang()
+  const intl = useIntl()
+
+  return (
+    <section className={styles.wrapper}>
+      <address className={styles.address}>
+        <ul className={styles.contactInfo}>
+          <li>
+            <span className={styles.heading}>
+              {intl.formatMessage({ id: "Address" })}
+            </span>
+            <span>{hotel.address.streetAddress}</span>
+            <span>{hotel.address.city}</span>
+          </li>
+          <li>
+            <span className={styles.heading}>
+              {intl.formatMessage({ id: "Driving directions" })}
+            </span>
+            <Link href="#">{intl.formatMessage({ id: "Google Maps" })}</Link>
+          </li>
+          <li>
+            <span className={styles.heading}>
+              {intl.formatMessage({ id: "Email" })}
+            </span>
+            <Link href={`mailto:${hotel.contactInformation.email}`}>
+              {hotel.contactInformation.email}
+            </Link>
+          </li>
+          <li>
+            <span className={styles.heading}>
+              {intl.formatMessage({ id: "Contact us" })}
+            </span>
+            <Link href={`tel:${hotel.contactInformation.phoneNumber}`}>
+              {hotel.contactInformation.phoneNumber}
+            </Link>
+          </li>
+          <li>
+            <span className={styles.heading}>
+              {intl.formatMessage({ id: "Follow us" })}
+            </span>
+            <div className={styles.soMeIcons}>
+              <Link href="#" target="_blank">
+                <InstagramIcon color="burgundy" />
+              </Link>
+              <Link href="#" target="_blank">
+                <FacebookIcon color="burgundy" />
+              </Link>
+            </div>
+          </li>
+        </ul>
+      </address>
+      {hotel.hotelFacts.ecoLabels.nordicEcoLabel ? (
+        <div className={styles.ecoLabel}>
+          <Image
+            height={38}
+            width={38}
+            alt={intl.formatMessage({ id: "Nordic Swan Ecolabel" })}
+            src={`/_static/img/icons/swan-eco/swan_eco_dark_${lang}.png`}
+          />
+          <div className={styles.ecoLabelText}>
+            <span>{intl.formatMessage({ id: "Nordic Swan Ecolabel" })}</span>
+            <span>
+              {hotel.hotelFacts.ecoLabels.svanenEcoLabelCertificateNumber}
+            </span>
+          </div>
+        </div>
+      ) : null}
+    </section>
+  )
+}