From 06cc4fd0b56fd0b90a020db3f3386723e35821ec Mon Sep 17 00:00:00 2001 From: Telkens Date: Wed, 28 Feb 2024 11:56:40 -0500 Subject: [PATCH 1/2] Add principal banner using a gallery image --- package-lock.json | 30 +++++++++++++++++- package.json | 11 ++++--- src/app/page.tsx | 6 ++-- src/components/Banner.tsx | 65 +++++++++++++++++++++++++++++++++++++++ 4 files changed, 104 insertions(+), 8 deletions(-) create mode 100644 src/components/Banner.tsx diff --git a/package-lock.json b/package-lock.json index f8a9778..db132f0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,12 +10,15 @@ "dependencies": { "next": "14.1.0", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "react-icons": "^5.0.1", + "react-image-gallery": "^1.3.0" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "@types/react-image-gallery": "^1.2.4", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.1.0", @@ -487,6 +490,15 @@ "@types/react": "*" } }, + "node_modules/@types/react-image-gallery": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@types/react-image-gallery/-/react-image-gallery-1.2.4.tgz", + "integrity": "sha512-H0xpmT5rlSH0qiTvcUDCPDLRBi3J3Xa4COqaDqGb7ffLFpQoPAxpZdNuKCuThhFI0xJmNnMubZiD6B3kCBHtcw==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/scheduler": { "version": "0.16.8", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", @@ -3731,6 +3743,22 @@ "react": "^18.2.0" } }, + "node_modules/react-icons": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz", + "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==", + "peerDependencies": { + "react": "*" + } + }, + "node_modules/react-image-gallery": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/react-image-gallery/-/react-image-gallery-1.3.0.tgz", + "integrity": "sha512-lKnPaOzxqSdujPFyl+CkVw0j1aYoNCHk61cvr1h7aahf5aWqmPcR9YhUB4cYrt5Tn5KHDaPUzYm5/+cX9WxzaA==", + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index d9a6c91..a7f49b7 100644 --- a/package.json +++ b/package.json @@ -9,19 +9,22 @@ "lint": "next lint" }, "dependencies": { + "next": "14.1.0", "react": "^18", "react-dom": "^18", - "next": "14.1.0" + "react-icons": "^5.0.1", + "react-image-gallery": "^1.3.0" }, "devDependencies": { - "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "@types/react-image-gallery": "^1.2.4", "autoprefixer": "^10.0.1", + "eslint": "^8", + "eslint-config-next": "14.1.0", "postcss": "^8", "tailwindcss": "^3.3.0", - "eslint": "^8", - "eslint-config-next": "14.1.0" + "typescript": "^5" } } diff --git a/src/app/page.tsx b/src/app/page.tsx index ccbb590..e6db74e 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,9 +1,9 @@ -import Image from "next/image"; +import Banner from "@/components/Banner"; export default function Home() { return ( -
-

Landing

+
+
); } diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx new file mode 100644 index 0000000..b13836c --- /dev/null +++ b/src/components/Banner.tsx @@ -0,0 +1,65 @@ +"use client"; +import { FC, useEffect, useState, useRef } from "react"; + +import "react-image-gallery/styles/css/image-gallery.css"; +import ImageGallery from "react-image-gallery"; + +import { BsChevronCompactLeft, BsChevronCompactRight } from "react-icons/bs"; + +const Banner: FC = () => { + const [isMobile, setIsMobile] = useState(false); + const images = [ + { + original: `/images/banner1${isMobile ? "m" : "d"}.webp`, + }, + { + original: `/images/banner2${isMobile ? "m" : "d"}.webp`, + }, + ]; + + const slideRef = useRef(null); + + useEffect(() => { + setIsMobile(window.innerWidth <= 600); + }, []); + + return ( +
+ ( + + )} + renderRightNav={(onClick, disabled) => ( + + )} + onClick={() => { + if (slideRef.current?.getCurrentIndex() === 1) { + window.open( + "https://actualizatucarro.mercadoshops.com.co/", + "_blank" + ); + } + }} + /> +
+ ); +}; +export default Banner; From 3deab77abdb935a6139de4f653607c9f80654521 Mon Sep 17 00:00:00 2001 From: Telkens Date: Wed, 28 Feb 2024 13:11:32 -0500 Subject: [PATCH 2/2] Clean the code creating a hook for the isMobile validation --- src/components/Banner.tsx | 9 +++------ src/hooks/useMobile.ts | 14 ++++++++++++++ 2 files changed, 17 insertions(+), 6 deletions(-) create mode 100644 src/hooks/useMobile.ts diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx index b13836c..6dc3d95 100644 --- a/src/components/Banner.tsx +++ b/src/components/Banner.tsx @@ -1,5 +1,6 @@ "use client"; -import { FC, useEffect, useState, useRef } from "react"; +import { FC, useRef } from "react"; +import useMobile from "@/hooks/useMobile"; import "react-image-gallery/styles/css/image-gallery.css"; import ImageGallery from "react-image-gallery"; @@ -7,7 +8,7 @@ import ImageGallery from "react-image-gallery"; import { BsChevronCompactLeft, BsChevronCompactRight } from "react-icons/bs"; const Banner: FC = () => { - const [isMobile, setIsMobile] = useState(false); + const { isMobile } = useMobile(); const images = [ { original: `/images/banner1${isMobile ? "m" : "d"}.webp`, @@ -19,10 +20,6 @@ const Banner: FC = () => { const slideRef = useRef(null); - useEffect(() => { - setIsMobile(window.innerWidth <= 600); - }, []); - return (
{ + const [isMobile, setIsMobile] = useState(false); + + useEffect(() => { + setIsMobile(window.innerWidth <= 600); + }, []); + + return { + isMobile, + }; +}; +export default useMobile;