Merged in feat/SW-1899-destination-city-mobile-map-active-pins (pull request #1557)

feat(SW-1899): active hotel pin on carousel scroll

* feat(SW-1899): active hotel pin on carousel scroll


Approved-by: Erik Tiekstra

apps/scandic-web/components/Carousel/index.tsx

@@ -22,6 +22,7 @@ function Carousel({
   children,
   scrollToIdx = 0,
   align = "start",
+  onScrollSelect,
 }: CarouselProps) {
   const [carouselRef, api] = useEmblaCarousel(
     {
@@ -34,10 +35,14 @@ function Carousel({
   )
   const [selectedIndex, setSelectedIndex] = useState(scrollToIdx)
 
-  const onSelect = useCallback((api: CarouselApi) => {
-    if (!api) return
-    setSelectedIndex(api.selectedScrollSnap())
-  }, [])
+  const onSelect = useCallback(
+    (api: CarouselApi) => {
+      if (!api) return
+      setSelectedIndex(api.selectedScrollSnap())
+      onScrollSelect?.(api.selectedScrollSnap())
+    },
+    [onScrollSelect]
+  )
 
   function scrollPrev() {
     api?.scrollPrev()

apps/scandic-web/components/Carousel/types.ts

@@ -16,7 +16,7 @@ export interface CarouselProps extends PropsWithChildren {
   plugins?: CarouselPlugin
   setApi?: (api: CarouselApi) => void
   className?: string
-  handleScrollSelected?: (idx: number) => void
+  onScrollSelect?: (idx: number) => void
   scrollToIdx?: number
   align?: "start" | "center"
 }