Merge pull request #238 from Actualiza-Tu-Carro/116-modificacionmarcas

corregida transition carousel
Dium-dev · Nov 28, 2023 · 5da59ca · 5da59ca
2 parents 7804c22 + 2acdbdc
commit 5da59ca
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 195 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/containerCards/containerCardsBrands.tsx b/src/components/containerCards/containerCardsBrands.tsx
@@ -3,8 +3,21 @@ import { Carousel } from '../carousels/carousel';
 import BrandCard from '../cards/brandCard';
 import Link from 'next/link';
 import { useBrandStore } from '../../store/productStore';
-import React from 'react';
+import React, { useState, useRef } from 'react';
 import Image from 'next/image';
+import Ticker from 'framer-motion-ticker';
+
+interface TickerProps {
+  ref?: React.MutableRefObject<null>;
+  children: Element[];
+  duration: number;
+  items: { name: string; image: string; }[];
+  auto: boolean;
+}
+
+type AnimatedValue = {
+  animate(): void;
+};
 
 const ContainerCardsBrands: React.FC = () => {
   const setSelectedBrand = useBrandStore((state) => state.setSelectedBrand);
@@ -111,29 +124,38 @@ const ContainerCardsBrands: React.FC = () => {
     setSelectedBrand(brandName);
   };
 
+  const value: AnimatedValue = {
+    animate() {
+      // Implement the animate method
+    },
+  };
+  value.animate(); // This will work because value is an AnimatedValue
+
   return (
-    <div className="flex flex-col items-center justify-between mb-24 w-full flex-nowrap overflow-hidden">
-      <div className="w-full max-w-f-hd py-9">
-        <Carousel items={undefined} auto={true}>
+    <div className="flex flex-col items-center justify-between mb-24 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-2 gap-1 relative">
+
+        <Ticker duration={70}>
           {imagesBrands.map((brand, index) => (
             <div
               key={index}
               onClick={() => handleClick(brand.name)}
-              className="slider-infinite-scroll autoplay brand-link relative block w-32 h-32 sm:w-40 sm:h-40 m-0 flex items-center"
+              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-0 max-h-[100px] max-w-[100px] hover:scale-110 hover:stop-autoplay"
+                  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>
           ))}
-        </Carousel>
+          </Ticker>
+
       </div>
     </div>
   );

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -69,19 +69,6 @@ module.exports = {
       gap: {
         50: '50px',
       },
-      animation: {
-        'slider-infinite-scroll': 'infinite-scroll 2s ease-in infinite',
-      },
-      keyframes: {
-        'infinite-scroll': {
-          '0%': {
-            transform: 'translateX(0)',
-          },
-          '100%': {
-            transform: 'translateX(-50%)',
-          },
-        },
-      },
       plugins: [],
     },
   },