Merge branch 'develop' of https://github.com/Actualiza-Tu-Carro/Front…

…-end-ATC into categories-update
Dium-dev · Oct 3, 2023 · 694b79d · 694b79d
2 parents b6f20a6 + debbee3
commit 694b79d
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 6 deletions.
diff --git a/next.config.js b/next.config.js
@@ -10,6 +10,7 @@ const nextConfig = {
       'media.gm.com',
       'cdn-icons-png.flaticon.com',
       'user-images.githubusercontent.com',
+      'postlmg.cc/7GxXNxBz',
     ], // Agrega aquí los dominios permitidos para las imágenes
   },
 };

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -0,0 +1,36 @@
+import React, { FC } from 'react';
+import Image from 'next/image';
+import { MainButton } from '~/components/button/button';
+import Link from 'next/link';
+
+interface notFoundProps {}
+
+const notFound: FC<notFoundProps> = ({}) => {
+  return (
+    <div className="flex flex-col items-center h-screen w-screen gap-9 p-12">
+      <h1 className="text-center">
+        La pagina que estas buscando no parece existir
+      </h1>
+      <div>
+        <h1 className="text-center font-medium text-secondary-lm text-4xl mb-2">
+          ERROR
+        </h1>
+        <Image
+          src="https://i.postimg.cc/fLdFDym8/notFound.png"
+          alt="404"
+          width={500}
+          height={500}
+          className="object-cover mb-8"
+        ></Image>
+      </div>
+      <MainButton
+        variant="tertiary"
+        className="bg-primary-lm text-white border font-bold"
+      >
+        <Link href="/">Ir Pagina Principal</Link>
+      </MainButton>
+    </div>
+  );
+};
+
+export default notFound;
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -8,11 +8,12 @@ import ReviewsContainer from '~/components/containerCards/containerCardsReviews'
 import reviews from '~/mockData/mockReviwes';
 import Banner from '~/components/Banner';
 import BrandCarrousel from '~/components/carousels/brandCarrousel';
+import SecondCarousel from '~/components/carousels/secondCarousel';
 
 export default function Home() {
   createIconsTypes();
   return (
-    <ContainerPage header={<MainCarousel />}>
+    <ContainerPage header={<SecondCarousel />}>
       <Categories />
       <TopSellers />
       <BrandCarrousel />

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>
   );
 };