x

apps/spa/src/components/ProductImageGallery.tsx

@@ -12,15 +12,15 @@ export default function ProductImageGallery({ images, fallback, alt = 'Product I
   const [currentIndex, setCurrentIndex] = useState(0)
   const scrollRef = useRef<HTMLDivElement>(null)
 
-  useEffect(() => {
+  const handleThumbnailClick = (idx: number) => {
+    setCurrentIndex(idx)
     if (scrollRef.current) {
-      const container = scrollRef.current
+      const child = scrollRef.current.children[idx] as HTMLElement
-      const child = container.children[currentIndex] as HTMLElement
       if (child) {
-        container.scrollTo({ left: child.offsetLeft, behavior: 'smooth' })
+        scrollRef.current.scrollTo({ left: child.offsetLeft, behavior: 'smooth' })
       }
     }
-  }, [currentIndex])
+  }
 
   const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
     const container = e.currentTarget
@@ -66,7 +66,7 @@ export default function ProductImageGallery({ images, fallback, alt = 'Product I
           <button
             key={image.id || idx}
             type="button"
-            onClick={() => setCurrentIndex(idx)}
+            onClick={() => handleThumbnailClick(idx)}
             className={`relative aspect-square w-20 md:w-full flex-none overflow-hidden rounded-2xl border-2 transition-all snap-center ${
               currentIndex === idx ? 'border-pop-pink shadow-md' : 'border-transparent opacity-60 hover:opacity-100'
             }`}

apps/website/src/components/ProductGallery.tsx

@@ -13,15 +13,15 @@ export default function ProductGallery({ productName, categoryName, images }: Pr
   const [activeIndex, setActiveIndex] = useState(0)
   const scrollRef = useRef<HTMLDivElement>(null)
 
-  useEffect(() => {
+  const handleThumbnailClick = (idx: number) => {
+    setActiveIndex(idx)
     if (scrollRef.current) {
-      const container = scrollRef.current
+      const child = scrollRef.current.children[idx] as HTMLElement
-      const child = container.children[activeIndex] as HTMLElement
       if (child) {
-        container.scrollTo({ left: child.offsetLeft, behavior: 'smooth' })
+        scrollRef.current.scrollTo({ left: child.offsetLeft, behavior: 'smooth' })
       }
     }
-  }, [activeIndex])
+  }
 
   const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
     const container = e.currentTarget
@@ -65,7 +65,7 @@ export default function ProductGallery({ productName, categoryName, images }: Pr
           <button
             key={idx}
             type="button"
-            onClick={() => setActiveIndex(idx)}
+            onClick={() => handleThumbnailClick(idx)}
             className={`relative aspect-square w-20 md:w-full flex-none overflow-hidden rounded-2xl border-2 transition-all snap-center ${
               activeIndex === idx ? 'border-brand-primary opacity-100' : 'border-transparent opacity-60 hover:opacity-100'
             }`}