From efce58c2ee966af73bc0091c23bc1f343acdc3ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dante=20=C3=81lvarez?=
 <89805481+danalvrz@users.noreply.github.com>
Date: Wed, 20 Dec 2023 12:59:29 -0600
Subject: [PATCH] add conditionals

---
 news/40.feature         |  2 +-
 src/components/View.jsx | 10 ++++------
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/news/40.feature b/news/40.feature
index b6813bc..63ac652 100644
--- a/news/40.feature
+++ b/news/40.feature
@@ -1 +1 @@
-Add `single-slide` classname to improve styling @danalvrz
\ No newline at end of file
+Add conditionals around arrow and dot buttons, and hide them, if there is only one slide @danalvrz
\ No newline at end of file
diff --git a/src/components/View.jsx b/src/components/View.jsx
index 32fd5b3..607a2c2 100644
--- a/src/components/View.jsx
+++ b/src/components/View.jsx
@@ -96,9 +96,7 @@ const SliderView = (props) => {
   return (
     <>
       <div
-        className={cx('block slider', className, {
-          'single-slide': data.slides?.length === 1,
-        })}
+        className={cx('block slider', className)}
         style={{ '--slider-container-width': `${sliderContainerWidth}px` }}
       >
         {(data.slides?.length === 0 || !data.slides) && isEditMode && (
@@ -112,7 +110,7 @@ const SliderView = (props) => {
         {data.slides?.length > 0 && (
           <>
             <div className="slider-wrapper">
-              {!data.hideArrows && (
+              {!data.hideArrows && data.slides?.length > 1 && (
                 <>
                   <PrevButton onClick={scrollPrev} disabled={prevBtnDisabled} />
                   <NextButton onClick={scrollNext} disabled={nextBtnDisabled} />
@@ -143,7 +141,7 @@ const SliderView = (props) => {
                 </div>
               </div>
             </div>
-
+            {data.slides?.length > 1 && (
             <div className="slider-dots">
               {scrollSnaps.map((_, index) => (
                 <DotButton
@@ -155,7 +153,7 @@ const SliderView = (props) => {
                   )}
                 />
               ))}
-            </div>
+            </div>)}
           </>
         )}
       </div>