cambios solicitados

src/components/containerCards/containerCardsBrands.tsx

@@ -128,9 +128,10 @@ const ContainerCardsBrands: React.FC = () => {
     updateBody('brandId', id);
   };
 
-  const [activeIndex, setActiveIndex] = useState(0);
+  const [currentIndex, setCurrentIndex] = useState(0);
   const tickerRef = useRef<HTMLDivElement>(null);
-
+  const [isPlaying, setIsPlaying] = React.useState(true);
+
   const value: AnimatedValue = {
     animate() {
       // Implement the actual animation logic here
@@ -140,76 +141,71 @@ const ContainerCardsBrands: React.FC = () => {
   };
 
   const prevSlide = () => {
-    const isFirstSlide = activeIndex === 0;
-    const newIndex = isFirstSlide ? imagesBrands.length - 1 : activeIndex - 1;
-    setActiveIndex(newIndex);
+    setIsPlaying(false);
+    const isFirstSlide = currentIndex === 0;
+    const newIndex = isFirstSlide ? imagesBrands.length - 1 : currentIndex - 1;
+    setCurrentIndex(newIndex);
   };
 
   const nextSlide = () => {
-    const isLastSlide = activeIndex === imagesBrands.length - 1;
-    const newIndex = isLastSlide ? 0 : activeIndex + 1;
-    setActiveIndex(newIndex);
-  };
-
-  const handlePrevClick = () => {
-    if (activeIndex > 0) {
-      setActiveIndex(activeIndex - 1);
-      tickerRef.current?.animate({ transform: 'translateX(100%)' });
-    } else {
-      setActiveIndex(imagesBrands.length - 1);
-      tickerRef.current?.animate({ transform: 'translateX(-100%)' });
-    }
+    setIsPlaying(false);
+    const isLastSlide = currentIndex === imagesBrands.length - 1;
+    const newIndex = isLastSlide ? 0 : currentIndex + 1;
+    setCurrentIndex(newIndex);
   };
 
-  const handleNextClick = () => {
-    if (activeIndex < imagesBrands.length - 1) {
-      setActiveIndex(activeIndex + 1);
-      tickerRef.current?.animate({ transform: 'translateX(-100%)' });
+  const navigateSlide = (direction: string) => {
+    setIsPlaying(false);
+    let newIndex;
+    if (direction === 'next') {
+       const isLastSlide = currentIndex === imagesBrands.length - 1;
+       newIndex = isLastSlide ? 0 : currentIndex + 1;
     } else {
-      setActiveIndex(0);
-      tickerRef.current?.animate({ transform: 'translateX(0)' });
+       const isFirstSlide = currentIndex === 0;
+       newIndex = isFirstSlide ? imagesBrands.length - 1 : currentIndex - 1;
     }
-  };
-
+    setCurrentIndex(newIndex);
+   };
 
   return (
     <div className="flex flex-col items-center justify-between mb-7 w-full flex-nowrap overflow-hidden max-w-[1920px] mx-auto">
-    <div className="flex items-center justify-center w-full max-w-f-hd py-1 gap-1 relative">
-      <button
-        onClick={handlePrevClick}
-        className="w-10 h-10 apect-square rounded-full flex items-center justify-center p-1 bg-white text-[#000] shadow hover:scale-105 hover:text-primary-lm hover:shadow-lg transition-all cursor-pointer"
-      >
-        <BsChevronCompactLeft onClick={prevSlide} size="100%" />
-      </button>
-      <Ticker duration={70}>
+    <div className="group flex items-center justify-center w-full max-w-f-hd py-1 gap-1 relative">
+  <button
+    onClick={prevSlide}
+    className="invisible group-hover:visible w-10 h-10 aspect-square rounded-full items-center left-5 justify-center p-1 bg-white/50 text-[#000] shadow hover:scale-105 hover:text-primary-lm hover:shadow-lg transition-all cursor-pointer"
+  >
+    <BsChevronCompactLeft size="100%" />
+  </button>
+      <Ticker duration={70} onMouseEnter={() => setIsPlaying(false)} onMouseLeave={() => setIsPlaying(true)} isPlaying={isPlaying}>
         {imagesBrands.map((brand, index) => (
-          <div
-            key={index}
-            onClick={() => handleClick(brand.name)}
-            className="brand-link relative w-32 h-32 sm:w-40 sm:h-40 m-2 flex items-center"
-            aria-hidden="true"
-          >
-            <Link href={`/products?brand=${brand.name}`} key={index}>
-              <Image
-                src={brand.image}
-                alt={brand.name}
-                className="brand-image object-contain w-full h-full m-2 max-h-[100px] max-w-[100px] hover:scale-110 ${!isHovering && 'hover:stop-autoplay'}`;"
-                width={300}
-                height={300}
-              />
-            </Link>
-          </div>
-        ))}
-        </Ticker>
-        <button
-        onClick={handleNextClick}
-        className="w-10 h-10 apect-square rounded-full flex items-center justify-center p-2 bg-white text-[#000] shadow hover:scale-105 hover:text-primary-lm hover:shadow-lg transition-all cursor-pointer"
-      >
-        <BsChevronCompactRight onClick={nextSlide} size="100%" />
-        </button>
+       <div
+        key={index}
+        onClick={() => handleClick(brand.name)}
+        className="brand-link relative w-32 h-32 sm:w-40 sm:h-40 m-2 flex items-center"
+        aria-hidden="true"
+       >
+      {/* Update this part: Remove the <a> tag */}
+      <Link href={`/products?brand=${brand.name}`}>
+        <Image
+          src={brand.image}
+          alt={brand.name}
+          className="brand-image object-contain w-full h-full m-2 max-h-[100px] max-w-[100px] hover:scale-110"
+          width={300}
+          height={300}
+        />
+      </Link>
+    </div>
+    ))}
+  </Ticker>
+  <button
+    onClick={nextSlide}
+    className="invisible group-hover:visible w-10 h-10 aspect-square rounded-full items-center right-5 justify-center p-2 bg-white/50 text-[#000] shadow hover:scale-105 hover:text-primary-lm hover:shadow-lg transition-all cursor-pointer"
+  >
+    <BsChevronCompactRight size="100%" />
+  </button>
+      </div>
     </div>
-  </div>
-);
+  );
 };
 
 export default ContainerCardsBrands;

src/types/icons.d.ts

@@ -1 +1 @@
-export type IconTypes = | 'CarShoping' | 'CardCredit' | 'Cash' | 'Close' | 'Cookie' | 'Facebook' | 'HamburguerClose' | 'HamburguerOpen' | 'Heart' | 'Instagram' | 'Login' | 'MapLocation' | 'Moon' | 'SearchIcon' | 'Shield' | 'Sun' | 'Truck' | 'Whatsapp' | 'icon' | 'quotationMarks' | 'warranty' 
+export type IconTypes = | 'CardCredit' | 'CarShoping' | 'Cash' | 'Close' | 'Cookie' | 'Eye' | 'EyeBlocked' | 'Facebook' | 'HamburguerClose' | 'HamburguerOpen' | 'Heart' | 'icon' | 'Instagram' | 'Login' | 'MapLocation' | 'Moon' | 'quotationMarks' | 'SearchIcon' | 'Shield' | 'Sun' | 'Truck' | 'warranty' | 'Whatsapp'