From b43b7b561a1ef13bf70084c315cb251982fad96c Mon Sep 17 00:00:00 2001
From: Clinton <clinton.langosch@gmail.com>
Date: Mon, 21 Jun 2021 13:59:34 -0700
Subject: [PATCH] feat: add left arrow to navigate to previous image

---
 .../gatsby-theme-newrelic/icons/feather.js    |  5 ++
 src/components/ImageSlider/ImageSlider.js     | 54 ++++++++++++++-----
 2 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/src/@newrelic/gatsby-theme-newrelic/icons/feather.js b/src/@newrelic/gatsby-theme-newrelic/icons/feather.js
index 3ae33caef..8ee0deb57 100644
--- a/src/@newrelic/gatsby-theme-newrelic/icons/feather.js
+++ b/src/@newrelic/gatsby-theme-newrelic/icons/feather.js
@@ -34,6 +34,11 @@ export default {
       />
     </>
   ),
+  'chevron-left': (
+    <>
+      <polyline points="15 18 9 12 15 6" />
+    </>
+  ),
   'chevron-right': (
     <>
       <polyline points="9 18 15 12 9 6" />
diff --git a/src/components/ImageSlider/ImageSlider.js b/src/components/ImageSlider/ImageSlider.js
index 594148a29..aea617ae6 100644
--- a/src/components/ImageSlider/ImageSlider.js
+++ b/src/components/ImageSlider/ImageSlider.js
@@ -11,6 +11,16 @@ const ImageSlider = ({ images, height }) => {
     setSelectedImageIndex(nextImageIndex % images.length);
   };
 
+  const handleClickPrev = () => {
+    const prevImageIndex = selectedImageIndex - 1;
+    if (prevImageIndex < 0) {
+      setSelectedImageIndex(images.length - 1);
+      console.log(images.length - 1);
+    } else {
+      setSelectedImageIndex(prevImageIndex % images.length);
+    }
+  };
+
   return (
     <div
       css={css`
@@ -19,20 +29,36 @@ const ImageSlider = ({ images, height }) => {
       `}
     >
       {images.length > 1 && (
-        <button
-          onClick={handleClickNext}
-          css={css`
-            position: absolute;
-            top: 38%;
-            right: 0;
-            background: none;
-            color: var(--color-white);
-            border: none;
-            cursor: pointer;
-          `}
-        >
-          <Icon name="chevron-right" size="4rem" />
-        </button>
+        <>
+          <button
+            onClick={handleClickPrev}
+            css={css`
+              position: absolute;
+              top: 38%;
+              left: 0;
+              background: none;
+              color: var(--color-white);
+              border: none;
+              cursor: pointer;
+            `}
+          >
+            <Icon name="chevron-left" size="4rem" />
+          </button>
+          <button
+            onClick={handleClickNext}
+            css={css`
+              position: absolute;
+              top: 38%;
+              right: 0;
+              background: none;
+              color: var(--color-white);
+              border: none;
+              cursor: pointer;
+            `}
+          >
+            <Icon name="chevron-right" size="4rem" />
+          </button>
+        </>
       )}
       <a
         href={images[selectedImageIndex]}