guardado previo al lodo

src/front/js/component/home-catalog.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { ProductSection } from './product-section';
-import { array } from 'prop-types';
+
 
 const urlBackend = process.env.BACKEND_URL;
 
@@ -12,7 +12,8 @@ export const HomeCatalog = () => {
 
     useEffect(() => {
         const interval = setInterval(() =>
-            setRandom(Math.floor(Math.random() * 15) + 1), 10000);
+            setRandom(Math.floor(Math.random() * 15) + 1)
+            , 10000);
 
         return () => clearInterval(interval);
     }, []);

src/front/js/component/onfireitem.js

@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 export const OnFireItem = ({ item, itemName }) => {
+  const [imageNumber, setImageNumber] = useState(0);
+  const [fade, setFade] = useState(true);
 
   let image = "";
   const validacionLista = () => {
@@ -14,10 +16,23 @@ export const OnFireItem = ({ item, itemName }) => {
 
   validacionLista();
 
+  useEffect(()=>{
+    const interval = setInterval(() => {
+      setFade(false);
+      setTimeout(() => {
+        setImageNumber((prev) => (prev === 0 ? 1 : 0));
+        setFade(true); 
+      }, 500);
+    }, 4000);
+
+    return () => clearInterval(interval);
+  },[])
+
+
   return (<>
     <div className="content-tendencia">
       <div className="container-image-tendencia">
-        <img src={image?.[0]} className="card-img" alt="..." />
+        <img src={image?.[imageNumber]} className={`card-img ${fade ? "fade-in" : "fade-out"}`} alt="..." />
       </div>
       <span className="ribbon position-absolute top-0 start-0 rounded text-bg-danger">TENDENCIA<span className="visually-hidden">unread messages</span></span>
       <div className="fire-container text-bg-dark text-end p-4">

src/front/js/component/product-section.js

@@ -26,7 +26,7 @@ export const ProductSection = ({ name, products }) => {
                         {products.map((product, index) => {
                             return (
                                 <div className="col-md-3" key={index}>
-                                    <ProductCard name={name} product={product} />
+                                    <ProductCard name={name} product={product}/>
                                 </div>
                             )
                         })};

src/front/js/store/flux.js

@@ -97,6 +97,8 @@ const getState = ({ getStore, getActions, setStore }) => {
 					const full_cart = []
 					let color = ""
 					full_cart.push(smartphones, laptops, tvs)
+					console.log(cart);
+
 
 					const done_cart = []
 					full_cart.forEach((cart_list) => {
@@ -114,6 +116,7 @@ const getState = ({ getStore, getActions, setStore }) => {
 					})
 
 					setStore({ cart: done_cart })
+					console.log(getStore().cart)
 
 				} catch (error) {
 

src/front/styles/index.css

@@ -131,9 +131,13 @@ ul {
     border-radius: 1em;
 }
 
+.dropdown-content {
+    right: -2rem;
+}
+
 .dropdown-content-search {
     max-height: 15em;
-    max-width: 13.5penem;
+    max-width: 13.5em;
     cursor: pointer;
     background-color: white;
     color: black;
@@ -643,6 +647,7 @@ footer {
     transform: translateY(-1rem);
     opacity: 0;
 }
+
 .container_card .card_product:hover .btn_card_product {
     opacity: 1;
     transform: translateX(-50%) translateY(1.5rem);
@@ -936,10 +941,19 @@ input[type=file]::-webkit-file-upload-button {
 .container-image-tendencia img {
     width: 100%;
     height: 100%;
+    transition: opacity 0.5s ease-in-out;
+}
+
+.fade-in {
+    opacity: 1;
+}
+
+.fade-out {
+    opacity: 0;
 }
 
 .content-tendencia {
-    width: 32rem;
+    width: 38rem;
     height: 32rem;
     position: relative;
     background-color: white;