From 9f4152fb22431d232bac2f58b9d0552a1f10c389 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ferm=C3=ADn?= <fermin.breccia@gmail.com>
Date: Fri, 20 Dec 2024 23:03:52 -0300
Subject: [PATCH 1/2] feat(): add onSlideChange prop to carousel

---
 .../Carousel/components/Controls/LeftButton.module.css      | 1 +
 .../Carousel/components/Controls/RightButton.module.css     | 1 +
 src/components/Carousel/index.tsx                           | 6 +++---
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/Carousel/components/Controls/LeftButton.module.css b/src/components/Carousel/components/Controls/LeftButton.module.css
index 0085b96d..5d4db77b 100644
--- a/src/components/Carousel/components/Controls/LeftButton.module.css
+++ b/src/components/Carousel/components/Controls/LeftButton.module.css
@@ -6,4 +6,5 @@
   height: 100%;
   display: flex;
   align-items: center;
+  justify-content: center;
 }
diff --git a/src/components/Carousel/components/Controls/RightButton.module.css b/src/components/Carousel/components/Controls/RightButton.module.css
index f6d8f0f9..0eb2a55d 100644
--- a/src/components/Carousel/components/Controls/RightButton.module.css
+++ b/src/components/Carousel/components/Controls/RightButton.module.css
@@ -6,4 +6,5 @@
   height: 100%;
   display: flex;
   align-items: center;
+  justify-content: center;
 }
diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx
index 790d2add..696644ff 100644
--- a/src/components/Carousel/index.tsx
+++ b/src/components/Carousel/index.tsx
@@ -22,11 +22,13 @@ export interface Carouselv2Props {
   controllerLayout?: 'attached' | 'detached'
   canAutoRotate?: boolean
   onThumbnailHandler?: (index: number) => void
+  onSlideChange?: (index: number) => void
 }
 
 const Carouselv2 = ({
   canAutoRotate = true,
   onThumbnailHandler,
+  onSlideChange,
   ...props
 }: Carouselv2Props) => {
   const [activeIndex, setActiveIndex] = useState(0)
@@ -71,13 +73,11 @@ const Carouselv2 = ({
         }}
         plugins={[autoplay.current]}
         onMouseEnter={() => {
-          console.log('canAutoRotate onMouseEnter', canAutoRotate)
           if (canAutoRotate) {
             autoplay.current.stop()
           }
         }}
         onMouseLeave={() => {
-          console.log('canAutoRotate onMouseLeave', canAutoRotate)
           if (canAutoRotate) {
             // Internally it is checking if timer is set, and since it can be, it will make .reset() never work
             autoplay.current.stop()
@@ -85,8 +85,8 @@ const Carouselv2 = ({
           }
         }}
         onSlideChange={(index) => {
-          console.log('onSlideChange', index)
           setActiveIndex(index)
+          onSlideChange?.(index)
         }}
         loop={true}
         withControls={false}

From 3b5be680cbf19d09b47fe6a7c5d1c32b83ab30a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ferm=C3=ADn?= <fermin.breccia@gmail.com>
Date: Sat, 21 Dec 2024 01:53:17 -0300
Subject: [PATCH 2/2] fix(): center buttons, make title optional

---
 .../Carousel/components/Controls/BaseButton.module.css        | 3 +++
 src/components/Carousel/components/Controls/BaseButton.tsx    | 2 +-
 .../Carousel/components/Controls/LeftButton.module.css        | 1 -
 src/components/Carousel/components/Controls/LeftButton.tsx    | 2 --
 .../Carousel/components/Controls/RightButton.module.css       | 1 -
 src/components/Carousel/index.tsx                             | 4 ++--
 6 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/Carousel/components/Controls/BaseButton.module.css b/src/components/Carousel/components/Controls/BaseButton.module.css
index 356009c0..3756f608 100644
--- a/src/components/Carousel/components/Controls/BaseButton.module.css
+++ b/src/components/Carousel/components/Controls/BaseButton.module.css
@@ -10,4 +10,7 @@
     drop-shadow(2px 0px 40px rgba(61, 11, 111, 0.4))
     drop-shadow(2px 0px 32px rgba(61, 11, 111, 0.7))
     drop-shadow(2px 0px 8px rgba(61, 11, 111, 0.5));
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
diff --git a/src/components/Carousel/components/Controls/BaseButton.tsx b/src/components/Carousel/components/Controls/BaseButton.tsx
index 93b7974f..66823e83 100644
--- a/src/components/Carousel/components/Controls/BaseButton.tsx
+++ b/src/components/Carousel/components/Controls/BaseButton.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react'
+import { PropsWithChildren } from 'react'
 
 import styles from './BaseButton.module.css'
 
diff --git a/src/components/Carousel/components/Controls/LeftButton.module.css b/src/components/Carousel/components/Controls/LeftButton.module.css
index 5d4db77b..0085b96d 100644
--- a/src/components/Carousel/components/Controls/LeftButton.module.css
+++ b/src/components/Carousel/components/Controls/LeftButton.module.css
@@ -6,5 +6,4 @@
   height: 100%;
   display: flex;
   align-items: center;
-  justify-content: center;
 }
diff --git a/src/components/Carousel/components/Controls/LeftButton.tsx b/src/components/Carousel/components/Controls/LeftButton.tsx
index bd8f5656..505443b5 100644
--- a/src/components/Carousel/components/Controls/LeftButton.tsx
+++ b/src/components/Carousel/components/Controls/LeftButton.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { ChevronLeft } from '@/assets/images'
 
 import BaseButton, { BaseButtonProps } from './BaseButton'
diff --git a/src/components/Carousel/components/Controls/RightButton.module.css b/src/components/Carousel/components/Controls/RightButton.module.css
index 0eb2a55d..f6d8f0f9 100644
--- a/src/components/Carousel/components/Controls/RightButton.module.css
+++ b/src/components/Carousel/components/Controls/RightButton.module.css
@@ -6,5 +6,4 @@
   height: 100%;
   display: flex;
   align-items: center;
-  justify-content: center;
 }
diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx
index 696644ff..ed6166d3 100644
--- a/src/components/Carousel/index.tsx
+++ b/src/components/Carousel/index.tsx
@@ -8,7 +8,7 @@ import Controller from './components/Controller'
 import styles from './index.module.scss'
 
 export interface SlideData {
-  title: string
+  title?: string
   slideElement: JSX.Element
   thumbnail?: JSX.Element
   disableGradient?: boolean
@@ -56,7 +56,7 @@ const Carouselv2 = ({
       >
         {item.slideElement}
         <div className={styles.title}>
-          <div className={styles.titleText}>{item.title}</div>
+          {item.title && <div className={styles.titleText}>{item.title}</div>}
           {item.button ?? null}
         </div>
       </Carousel.Slide>