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/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>
+      ))}
+    </>
+  )
+}