Improve gallery scroll indicators and format code

Co-authored-by: arielcostas <94913521+arielcostas@users.noreply.github.com>

1 files changed, 35 insertions, 16 deletions

diff --git a/src/frontend/app/components/StopGallery.tsx b/src/frontend/app/components/StopGallery.tsx
index 7dda637..3646fdd 100644
--- a/src/frontend/app/components/StopGallery.tsx
+++ b/src/frontend/app/components/StopGallery.tsx
@@ -1,5 +1,4 @@
-import React, { useRef } from "react";
-import { motion, useMotionValue } from "framer-motion";
+import React, { useRef, useState, useEffect } from "react";
 import { type Stop } from "../data/StopDataProvider";
 import StopGalleryItem from "./StopGalleryItem";
 import "./StopGallery.css";
@@ -10,9 +9,28 @@ interface StopGalleryProps {
   emptyMessage?: string;
 }
 
-const StopGallery: React.FC<StopGalleryProps> = ({ stops, title, emptyMessage }) => {
+const StopGallery: React.FC<StopGalleryProps> = ({
+  stops,
+  title,
+  emptyMessage,
+}) => {
   const scrollRef = useRef<HTMLDivElement>(null);
-  const x = useMotionValue(0);
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  useEffect(() => {
+    const element = scrollRef.current;
+    if (!element) return;
+
+    const handleScroll = () => {
+      const scrollLeft = element.scrollLeft;
+      const itemWidth = element.scrollWidth / stops.length;
+      const index = Math.round(scrollLeft / itemWidth);
+      setActiveIndex(index);
+    };
+
+    element.addEventListener("scroll", handleScroll);
+    return () => element.removeEventListener("scroll", handleScroll);
+  }, [stops.length]);
 
   if (stops.length === 0 && emptyMessage) {
     return (
@@ -33,24 +51,25 @@ const StopGallery: React.FC<StopGalleryProps> = ({ stops, title, emptyMessage })
         <h2 className="page-subtitle">{title}</h2>
         <span className="gallery-counter">{stops.length}</span>
       </div>
-      
-      <motion.div 
-        className="gallery-scroll-container"
-        ref={scrollRef}
-        style={{ x }}
-      >
+
+      <div className="gallery-scroll-container" ref={scrollRef}>
         <div className="gallery-track">
           {stops.map((stop) => (
             <StopGalleryItem key={stop.stopId} stop={stop} />
           ))}
         </div>
-      </motion.div>
-
-      <div className="gallery-indicators">
-        {stops.map((_, index) => (
-          <div key={index} className="gallery-indicator" />
-        ))}
       </div>
+
+      {stops.length > 1 && (
+        <div className="gallery-indicators">
+          {stops.map((_, index) => (
+            <div
+              key={index}
+              className={`gallery-indicator ${index === activeIndex ? "active" : ""}`}
+            />
+          ))}
+        </div>
+      )}
     </div>
   );
 };