From fe3d09927004fd3c3f2dd8aac1352d94f5d665fc Mon Sep 17 00:00:00 2001 From: Clay Martinez Date: Thu, 28 Sep 2023 12:35:19 -0500 Subject: [PATCH 1/3] bordeado inferior al menu desplegable del navbar --- src/components/navBar/navBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/navBar/navBar.tsx b/src/components/navBar/navBar.tsx index 4b4a8ab..6a4d618 100644 --- a/src/components/navBar/navBar.tsx +++ b/src/components/navBar/navBar.tsx @@ -104,7 +104,7 @@ const NavBar: FC = ({}) => { {/* Menu */} {isOpenMenu && (
From 93048a44bc1d0e81e1327ae67eb79c2becf0bdb8 Mon Sep 17 00:00:00 2001 From: Clay Martinez Date: Thu, 28 Sep 2023 16:21:21 -0500 Subject: [PATCH 2/3] 1.0 --- src/app/page.tsx | 10 +-- src/components/carousels/secondCarousel.tsx | 77 +++++++++++++++++++++ 2 files changed, 82 insertions(+), 5 deletions(-) create mode 100644 src/components/carousels/secondCarousel.tsx diff --git a/src/app/page.tsx b/src/app/page.tsx index 69a2b3b..90bd17c 100644 --- 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 ( - }> - {/* */} + }> + diff --git a/src/components/carousels/secondCarousel.tsx b/src/components/carousels/secondCarousel.tsx new file mode 100644 index 0000000..a205807 --- /dev/null +++ b/src/components/carousels/secondCarousel.tsx @@ -0,0 +1,77 @@ +'use client'; +import React, { FC, useState, useEffect } from 'react'; +import { BsChevronCompactLeft, BsChevronCompactRight } from 'react-icons/bs'; + +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 = ({}) => { + 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 containerClass = isMobile ? 'mobile-carousel' : 'desktop-carousel'; + + return ( +
+
+
+ +
+
+ +
+
+ ); +}; + +export default SecondCarousel; From b47a97a64e031541a8c264d8fc7e32be01c88410 Mon Sep 17 00:00:00 2001 From: Clay Martinez Date: Mon, 2 Oct 2023 15:09:43 -0500 Subject: [PATCH 3/3] fix: Cambio de etiqueta div por nav en navBar fix: secondCarrousel ajuste de estilos --- src/components/carousels/secondCarousel.tsx | 27 ++++++++++++--------- src/components/navBar/navBar.tsx | 8 +++--- 2 files changed, 19 insertions(+), 16 deletions(-) diff --git a/src/components/carousels/secondCarousel.tsx b/src/components/carousels/secondCarousel.tsx index a205807..a664ad8 100644 --- a/src/components/carousels/secondCarousel.tsx +++ b/src/components/carousels/secondCarousel.tsx @@ -1,6 +1,7 @@ 'use client'; import React, { FC, useState, useEffect } from 'react'; import { BsChevronCompactLeft, BsChevronCompactRight } from 'react-icons/bs'; +import { Images } from '~/assets/img'; interface SecondCarouselProps {} @@ -48,26 +49,28 @@ const SecondCarousel: FC = ({}) => { }; }, [currentIndex]); - const containerClass = isMobile ? 'mobile-carousel' : 'desktop-carousel'; + const backgroundImageStyle = isMobile + ? { + backgroundImage: `url(${mobileSlidesList[currentIndex].url})`, + } + : { + backgroundImage: `url(${slidesList[currentIndex].url})`, + }; return (
-
+
-
+
diff --git a/src/components/navBar/navBar.tsx b/src/components/navBar/navBar.tsx index 6a4d618..3922b35 100644 --- a/src/components/navBar/navBar.tsx +++ b/src/components/navBar/navBar.tsx @@ -22,9 +22,9 @@ const NavBar: FC = ({}) => { }; return ( -
+
+ ); };