feat(SW-325): added pois to the list and dynamic map

components/Maps/Markers/Poi/index.tsx

@@ -0,0 +1,27 @@
+import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
+
+import { getCategoryIconName } from "../utils"
+import { poiVariants } from "./variants"
+
+import { PoiMarkerProps } from "@/types/components/maps/poiMarker"
+
+export default function PoiMarker({
+  category,
+  skipBackground,
+  size = 16,
+  className = "",
+}: PoiMarkerProps) {
+  const iconName = getCategoryIconName(category)
+  const Icon = iconName ? getIconByIconName(iconName) : null
+  const classNames = poiVariants({ category, skipBackground, className })
+
+  return Icon ? (
+    <span className={classNames}>
+      <Icon
+        color={skipBackground ? "grey80" : "white"}
+        width={size}
+        height={size}
+      />
+    </span>
+  ) : null
+}

components/Maps/Markers/Poi/poi.module.css

@@ -0,0 +1,52 @@
+/* 2024-09-18: At the moment, the background-colors for the poi marker is unknown.
+This will be handled later. */
+
+.icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--Spacing-x-half);
+  border-radius: var(--Corner-radius-Rounded);
+  background-color: var(--Scandic-Beige-90);
+}
+.airport,
+.amusementPark,
+.busTerminal,
+.fair,
+.hospital,
+.hotel,
+.marketingCity {
+}
+
+.museum {
+  background: var(--Base-Interactive-Surface-Secondary-normal);
+}
+.nearbyCompanies,
+.parkingGarage {
+}
+
+.restaurant {
+  background: var(--Scandic-Peach-50);
+}
+
+.shopping {
+  background: var(--Base-Interactive-Surface-Primary-normal);
+}
+.sports,
+.theatre {
+}
+
+.tourist {
+  background: var(--Scandic-Yellow-60);
+}
+
+.transportations {
+  background: var(--Base-Interactive-Surface-Tertiary-normal);
+}
+.zoo {
+}
+
+.icon.transparent {
+  background: transparent;
+  padding: 0;
+}

components/Maps/Markers/Poi/variants.ts

@@ -0,0 +1,34 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./poi.module.css"
+
+export const poiVariants = cva(styles.icon, {
+  variants: {
+    category: {
+      Airport: styles.airport,
+      "Amusement park": styles.amusementPark,
+      "Bus terminal": styles.busTerminal,
+      Fair: styles.fair,
+      Hospital: styles.hospital,
+      Hotel: styles.hotel,
+      "Marketing city": styles.marketingCity,
+      Museum: styles.museum,
+      "Nearby companies": styles.nearbyCompanies,
+      "Parking / Garage": styles.parkingGarage,
+      Restaurant: styles.restaurant,
+      Shopping: styles.shopping,
+      Sports: styles.sports,
+      Theatre: styles.theatre,
+      Tourist: styles.tourist,
+      Transportations: styles.transportations,
+      Zoo: styles.zoo,
+    },
+    skipBackground: {
+      true: styles.transparent,
+      false: "",
+    },
+  },
+  defaultVariants: {
+    skipBackground: false,
+  },
+})