feat(SW-340): Added hotel pins

2024-11-06 14:27:55 +01:00
parent fe6582ccbb
commit 378225f995
14 changed files with 321 additions and 129 deletions
--- a/components/Maps/InteractiveMap/HotelListingMapContent/hotelListingMapContent.module.css
+++ b/components/Maps/InteractiveMap/HotelListingMapContent/hotelListingMapContent.module.css
@@ -0,0 +1,51 @@
+.advancedMarker {
+  height: 32px;
+  min-width: 109px !important; /* Overwriting the default width of the @vis.gl/react-google-maps AdvancedMarker */
+}
+
+.advancedMarker.active {
+  height: var(--Spacing-x5);
+  width: var(
+    --Spacing-x5
+  ) !important; /* Overwriting the default width of the @vis.gl/react-google-maps AdvancedMarker */
+}
+
+.pin {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--Spacing-x-half) var(--Spacing-x1) var(--Spacing-x-half)
+    var(--Spacing-x-half);
+  border-radius: var(--Corner-radius-Rounded);
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
+  gap: var(--Spacing-x1);
+}
+
+.pin.active {
+  padding-right: var(--Spacing-x-one-and-half);
+}
+
+.pinLabel {
+  display: none;
+}
+
+.pin.active .pinLabel {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x2);
+  text-wrap: nowrap;
+}
+
+.pinIcon {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--Primary-Dark-Surface-Normal);
+}
--- a/components/Maps/InteractiveMap/HotelListingMapContent/index.tsx
+++ b/components/Maps/InteractiveMap/HotelListingMapContent/index.tsx
@@ -0,0 +1,47 @@
+import {
+  AdvancedMarker,
+  AdvancedMarkerAnchorPoint,
+} from "@vis.gl/react-google-maps"
+
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import HotelMarker from "../../Markers/Hotel"
+
+import styles from "./hotelListingMapContent.module.css"
+
+import { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"
+
+export default function HotelListingMapContent({
+  activeHotelPin,
+  hotelPins,
+}: {
+  activeHotelPin?: HotelPin["name"] | null
+  hotelPins: HotelPin[]
+}) {
+  return (
+    <div>
+      {hotelPins.map((pin) => (
+        <AdvancedMarker
+          key={pin.name}
+          className={styles.advancedMarker}
+          position={pin.coordinates}
+          anchorPoint={AdvancedMarkerAnchorPoint.CENTER}
+          zIndex={activeHotelPin === pin.name ? 2 : 0}
+        >
+          <span
+            className={`${styles.pin} ${activeHotelPin === pin.name ? styles.active : ""}`}
+          >
+            <span className={styles.pinIcon}>
+              <HotelMarker width={16} />
+            </span>
+            <Body asChild>
+              <span>
+                {pin.price} {pin.currency}
+              </span>
+            </Body>
+          </span>
+        </AdvancedMarker>
+      ))}
+    </div>
+  )
+}