fix: only active indicator is larger

BigWhaleLabs · Nov 7, 2023 · 22f38c3 · 22f38c3
1 parent e59ab30
commit 22f38c3
Showing 1 changed file with 4 additions and 16 deletions.
diff --git a/src/components/MainCarousel.tsx b/src/components/MainCarousel.tsx
@@ -57,16 +57,10 @@ const indicatorContainer = classnames(
   justifyContent('justify-center'),
   gap('gap-1')
 )
-const indicator = (isActive: boolean, isPrevOrNext: boolean) =>
+const indicator = (isActive: boolean) =>
   classnames(
-    width({
-      'w-1.5': !isActive && !isPrevOrNext,
-      'w-2': isActive || isPrevOrNext,
-    }),
-    height({
-      'h-1.5': !isActive && !isPrevOrNext,
-      'h-2': isActive || isPrevOrNext,
-    }),
+    width({ 'w-1.5': !isActive, 'w-2': isActive }),
+    height({ 'h-1.5': !isActive, 'h-2': isActive }),
     backgroundColor({ 'bg-blue-light': !isActive, 'bg-secondary': isActive }),
     borderRadius('rounded-full'),
     opacity({ 'opacity-50': !isActive })
@@ -155,13 +149,7 @@ export default function MainCarousel() {
           <ChevronLeft />
         </button>
         {messages.map((_, i) => (
-          <div
-            key={i}
-            className={indicator(
-              i === currentSlide,
-              i === prevSlide || i === nextSlide
-            )}
-          ></div>
+          <div className={indicator(i === currentSlide)} key={i}></div>
         ))}
         <button className={indicatorButton} onClick={handleNextSlide}>
           <ChevronRight />