Merge pull request #160 from Actualiza-Tu-Carro/133-actualizarslide

133 actualizarslide
Dium-dev · Oct 2, 2023 · debbee3 · debbee3
2 parents 5db8012 + b47a97a
commit debbee3
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 10 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -3,21 +3,21 @@ import { brands } from '~/mockData/mockBrands';
 import { TopSellers } from '~/components/containerCards/containerCards';
 import { createIconsTypes } from '~/utils/createIcons';
 import { ContainerPage } from './container_page';
-// import CategoryCategory from '~/components/containerCards/containerCardsCategoty';
-// import { category } from '~/mockData/mockCategory';
+import CategoryCategory from '~/components/containerCards/containerCardsCategoty';
+import { category } from '~/mockData/mockCategory';
 import BrandCategory from '~/components/containerCards/containerCardsBrands';
 import PaymentMethodsList from '~/components/paymentMethod/paymentMethodsList';
 import ReviewsContainer from '~/components/containerCards/containerCardsReviews';
 import reviews from '~/mockData/mockReviwes';
 import Banner from '~/components/Banner';
 import BrandCarrousel from '~/components/carousels/brandCarrousel';
-import Form from '~/components/form/Form';
+import SecondCarousel from '~/components/carousels/secondCarousel';
 
 export default function Home() {
   createIconsTypes();
   return (
-    <ContainerPage header={<MainCarousel />}>
-      {/* <CategoryCategory category={category} /> */}
+    <ContainerPage header={<SecondCarousel />}>
+      <CategoryCategory category={category} />
       <TopSellers />
       <BrandCarrousel />
       <BrandCategory brand={brands} />

diff --git a/src/components/carousels/secondCarousel.tsx b/src/components/carousels/secondCarousel.tsx
@@ -0,0 +1,80 @@
+'use client';
+import React, { FC, useState, useEffect } from 'react';
+import { BsChevronCompactLeft, BsChevronCompactRight } from 'react-icons/bs';
+import { Images } from '~/assets/img';
+
+interface SecondCarouselProps {}
+
+const slidesList = [
+  {
+    url: 'https://user-images.githubusercontent.com/124757365/267684986-ff0802dd-37d4-496a-9665-53dd8ae362b6.png',
+  },
+  {
+    url: 'https://user-images.githubusercontent.com/124757365/267684986-ff0802dd-37d4-496a-9665-53dd8ae362b6.png',
+  },
+];
+
+const mobileSlidesList = [
+  {
+    url: 'https://user-images.githubusercontent.com/124757365/267684987-30227360-5971-48d3-952e-ee05519a2002.png',
+  },
+  {
+    url: 'https://user-images.githubusercontent.com/124757365/267684987-30227360-5971-48d3-952e-ee05519a2002.png',
+  },
+];
+
+const SecondCarousel: FC<SecondCarouselProps> = ({}) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const isMobile = window.innerWidth <= 600;
+
+  const prevSlide = () => {
+    const isFirstSlide = currentIndex === 0;
+    const newIndex = isFirstSlide ? slidesList.length - 1 : currentIndex - 1;
+    setCurrentIndex(newIndex);
+  };
+
+  const nextSlide = () => {
+    const isLastSlide = currentIndex === slidesList.length - 1;
+    const newIndex = isLastSlide ? 0 : currentIndex + 1;
+    setCurrentIndex(newIndex);
+  };
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      nextSlide();
+    }, 4000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [currentIndex]);
+
+  const backgroundImageStyle = isMobile
+    ? {
+        backgroundImage: `url(${mobileSlidesList[currentIndex].url})`,
+      }
+    : {
+        backgroundImage: `url(${slidesList[currentIndex].url})`,
+      };
+
+  return (
+    <div
+      className={`mt-[109px] md:mt-[60px] w-full h-screen m-auto relative group `}
+    >
+      <div
+        style={backgroundImageStyle}
+        className={`w-full bg-cover bg-no-repeat duration-700 ${
+          isMobile ? 'h-[calc(100%-109px)]' : 'h-[calc(100%-60px)]'
+        }`}
+      ></div>
+      <div className="hidden group-hover:block absolute top-[40%] md:top-[45%] -translate-x-0 translate-y-[-50%] left-5 text-2xl rounded-full p-2 bg-white/50 text-background-dm cursor-pointer">
+        <BsChevronCompactLeft onClick={prevSlide} size={30} />
+      </div>
+      <div className="hidden group-hover:block absolute top-[40%] md:top-[45%] -translate-x-0 translate-y-[-50%] right-5 text-2xl rounded-full p-2 bg-white/50 text-background-dm cursor-pointer">
+        <BsChevronCompactRight onClick={nextSlide} size={30} />
+      </div>
+    </div>
+  );
+};
+
+export default SecondCarousel;
diff --git a/src/components/navBar/navBar.tsx b/src/components/navBar/navBar.tsx
@@ -22,9 +22,9 @@ const NavBar: FC<NavBarProps> = ({}) => {
   };
 
   return (
-    <div>
+    <nav>
       <div className="z-50 fixed top-0 bg-opacity-70 bg-white w-full backdrop-blur-sm flex-col shadow-sm">
-        <nav className="p-4 flex items-center h-[60px] justify-between mx-auto">
+        <div className="p-4 flex items-center h-[60px] justify-between mx-auto">
           {/* Contenedor lado izquierdo menu hamburguesa-imagenes*/}
           <div className="flex items-center gap-2">
             {/* Icono hamburguesa */}
@@ -89,7 +89,7 @@ const NavBar: FC<NavBarProps> = ({}) => {
 
             <ThemeModeButton />
           </div>
-        </nav>
+        </div>
         {/* Input mobile*/}
         <div className="md:hidden flex items-center justify-center pb-3 shadow-md">
           <InputField
@@ -104,15 +104,15 @@ const NavBar: FC<NavBarProps> = ({}) => {
         {/* Menu */}
         {isOpenMenu && (
           <div
-            className="fixed top-[108px] md:top-[60px] left-0 w-screen xs:max-w-[303px] backdrop-blur-sm bg-white bg-opacity-70 shadow-sm z-50 flex justify-center items-center"
+            className="fixed top-[108px] md:top-[60px] left-0 w-screen xs:max-w-[303px] backdrop-blur-sm bg-white bg-opacity-70 shadow-sm z-50 flex justify-center items-center rounded-b-md"
             onMouseLeave={toggleNavbar}
           >
             <MenuMobile updateState={updateState} />
           </div>
         )}
       </div>
       {flagState && <Form updateState={updateState} />}
-    </div>
+    </nav>
   );
 };