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/HotelMapContent/hotelMapContent.module.css
+++ b/components/Maps/InteractiveMap/HotelMapContent/hotelMapContent.module.css
@@ -0,0 +1,42 @@
+.advancedMarker {
+  height: var(--Spacing-x4);
+  width: var(
+    --Spacing-x4
+  ) !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 */
+}
+
+.poi {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 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);
+}
+
+.poi.active {
+  padding-right: var(--Spacing-x-one-and-half);
+}
+
+.poiLabel {
+  display: none;
+}
+
+.poi.active .poiLabel {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x2);
+  text-wrap: nowrap;
+}
--- a/components/Maps/InteractiveMap/HotelMapContent/index.tsx
+++ b/components/Maps/InteractiveMap/HotelMapContent/index.tsx
@@ -0,0 +1,68 @@
+import {
+  AdvancedMarker,
+  AdvancedMarkerAnchorPoint,
+} from "@vis.gl/react-google-maps"
+
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import PoiMarker from "../../Markers/Poi"
+import ScandicMarker from "../../Markers/Scandic"
+
+import styles from "./hotelMapContent.module.css"
+
+import { PointOfInterest } from "@/types/hotel"
+
+export default function HotelMapContent({
+  coordinates,
+  pointsOfInterest,
+  onActivePoiChange,
+  activePoi,
+}: {
+  coordinates: { lat: number; lng: number }
+  pointsOfInterest: PointOfInterest[]
+  onActivePoiChange?: (poiName: string | null) => void
+  activePoi?: string | null
+}) {
+  function toggleActivePoi(poiName: string) {
+    onActivePoiChange?.(activePoi === poiName ? null : poiName)
+  }
+  return (
+    <>
+      <AdvancedMarker position={coordinates} zIndex={1}>
+        <ScandicMarker />
+      </AdvancedMarker>
+
+      {pointsOfInterest.map((poi) => (
+        <AdvancedMarker
+          key={poi.name}
+          className={styles.advancedMarker}
+          position={poi.coordinates}
+          anchorPoint={AdvancedMarkerAnchorPoint.CENTER}
+          zIndex={activePoi === poi.name ? 2 : 0}
+          onMouseEnter={() => onActivePoiChange?.(poi.name)}
+          onMouseLeave={() => onActivePoiChange?.(null)}
+          onClick={() => toggleActivePoi(poi.name)}
+        >
+          <span
+            className={`${styles.poi} ${activePoi === poi.name ? styles.active : ""}`}
+          >
+            <PoiMarker
+              group={poi.group}
+              categoryName={poi.categoryName}
+              size={activePoi === poi.name ? 20 : 16}
+            />
+            <Body className={styles.poiLabel} asChild>
+              <span>
+                {poi.name}
+                <Caption asChild>
+                  <span>{poi.distance} km</span>
+                </Caption>
+              </span>
+            </Body>
+          </span>
+        </AdvancedMarker>
+      ))}
+    </>
+  )
+}