From 7ffc83d35e52e77b0ed3252e484bbf920a492e21 Mon Sep 17 00:00:00 2001
From: Satya Prakash Sasini <Satya@Satyas-MacBook-Pro.local>
Date: Sat, 9 Nov 2024 22:46:33 +0530
Subject: [PATCH] fix: arrow button visibility

---
 frontend/src/components/ui/ReviewCarousel.jsx | 42 ++++++++++---------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/ui/ReviewCarousel.jsx b/frontend/src/components/ui/ReviewCarousel.jsx
index 7031b5f..d0fb05e 100644
--- a/frontend/src/components/ui/ReviewCarousel.jsx
+++ b/frontend/src/components/ui/ReviewCarousel.jsx
@@ -153,25 +153,29 @@ const ReviewCarousel = () => {
         // whileHover is a framer specific attribute
         // It displaces buttons by 10px on hover for that nice slide animation
         }
-        <motion.button
-          id="next"
-          className=" absolute top-[40%] text-green-900 bg-none border-none text-6xl font-mono font-bold opacity-80 transition-opacity z-10 right-[50px] max-sm:text-white max-sm:text-2xl max-sm:right-2"
-          onClick={() =>
-            setActive((prev) => (prev + 1 < items.length ? prev + 1 : prev))
-          }
-          whileHover={{ x: 10, color: '#00B2CA', opacity: 1 }}
-        >
-          {'>>'}
-        </motion.button>
-        <motion.button
-          id="prev"
-          className=" absolute top-[40%] text-green-900 bg-none border-none text-6xl font-mono font-bold opacity-80 transition-opacity z-10 left-[50px] max-sm:text-white max-sm:text-2xl max-sm:left-2"
-          onClick={() => setActive((prev) => (prev - 1 >= 0 ? prev - 1 : prev))}
-          whileHover={{ x: -10, color: '#00B2CA', opacity: 1 }}
-        >
-          {' '}
-          {'<<'}
-        </motion.button>
+        {active < items.length - 1 && (
+          <motion.button
+            id="next"
+            className=" absolute top-[40%] text-green-900 bg-none border-none text-6xl font-mono font-bold opacity-80 transition-opacity z-10 right-[50px] max-sm:text-white max-sm:text-2xl max-sm:right-2"
+            onClick={() =>
+              setActive((prev) => (prev + 1 < items.length ? prev + 1 : prev))
+            }
+            whileHover={{ x: 10, color: '#00B2CA', opacity: 1 }}
+          >
+            {'>>'}
+          </motion.button>
+        )}
+        {active > 0 && (
+          <motion.button
+            id="prev"
+            className=" absolute top-[40%] text-green-900 bg-none border-none text-6xl font-mono font-bold opacity-80 transition-opacity z-10 left-[50px] max-sm:text-white max-sm:text-2xl max-sm:left-2"
+            onClick={() => setActive((prev) => (prev - 1 >= 0 ? prev - 1 : prev))}
+            whileHover={{ x: -10, color: '#00B2CA', opacity: 1 }}
+          >
+            {' '}
+            {'<<'}
+          </motion.button>
+        )}
       </div>
     </div>
   );