Merge pull request #2211 from graphcommerce-org/feature/no-thumbnail-…

…when-there-is-only-one-picture-GCOM-1335 Feature/no thumbnail when there is only one picture gcom 1335
graphcommerce-org · Feb 19, 2024 · 227076b · 227076b
2 parents 7937b20 + 2fc62cd
commit 227076b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 11 deletions.
diff --git a/.changeset/eight-beans-joke.md b/.changeset/eight-beans-joke.md
@@ -0,0 +1,5 @@
+---
+"@graphcommerce/framer-scroller": minor
+---
+
+We stopped showing the thumbnails in the sidebargallery when there is only 1 image.
diff --git a/packages/framer-scroller/components/ScrollerThumbnails.tsx b/packages/framer-scroller/components/ScrollerThumbnails.tsx
@@ -14,17 +14,19 @@ const componentName = 'ScrollerThumbnails'
 export function ScrollerThumbnails(props: ThumbnailsProps) {
   const { images, sx = [], ...buttonProps } = props
   return (
-    <ThumbnailContainer sx={sx}>
-      {images.map((item, i) => (
-        <ScrollerThumbnail
-          // eslint-disable-next-line react/no-array-index-key
-          key={`${i}-image`}
-          idx={i}
-          image={item}
-          {...buttonProps}
-        />
-      ))}
-    </ThumbnailContainer>
+    images.length > 1 && (
+      <ThumbnailContainer sx={sx}>
+        {images.map((item, i) => (
+          <ScrollerThumbnail
+            // eslint-disable-next-line react/no-array-index-key
+            key={`${i}-image`}
+            idx={i}
+            image={item}
+            {...buttonProps}
+          />
+        ))}
+      </ThumbnailContainer>
+    )
   )
 }