Skip to content

Commit

Permalink
Merge pull request #17 from Dium-dev/12-banner
Browse files Browse the repository at this point in the history
Add principal banner using a gallery image
  • Loading branch information
JohanMejia77 authored Feb 29, 2024
2 parents ba37df6 + 3deab77 commit e6d6590
Show file tree
Hide file tree
Showing 5 changed files with 115 additions and 8 deletions.
30 changes: 29 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 7 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
6 changes: 3 additions & 3 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import Image from "next/image";
import Banner from "@/components/Banner";

export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<h1>Landing</h1>
<main>
<Banner />
</main>
);
}
62 changes: 62 additions & 0 deletions src/components/Banner.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
"use client";
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";

import { BsChevronCompactLeft, BsChevronCompactRight } from "react-icons/bs";

const Banner: FC = () => {
const { isMobile } = useMobile();
const images = [
{
original: `/images/banner1${isMobile ? "m" : "d"}.webp`,
},
{
original: `/images/banner2${isMobile ? "m" : "d"}.webp`,
},
];

const slideRef = useRef<ImageGallery>(null);

return (
<section className="max-w-f-hd mx-auto relative group">
<ImageGallery
ref={slideRef}
items={images}
showFullscreenButton={false}
showPlayButton={false}
slideInterval={4000}
autoPlay
renderLeftNav={(onClick, disabled) => (
<button
onClick={onClick}
disabled={disabled}
className="hover:text-primary-lm transition-all ease-linear duration-300 absolute top-[50%] translate-y-[-50%] bg-background-lm z-10 p-2 rounded-full invisible group-hover:visible left-2 opacity-80"
>
<BsChevronCompactLeft size={31} />
</button>
)}
renderRightNav={(onClick, disabled) => (
<button
onClick={onClick}
disabled={disabled}
className="hover:text-primary-lm transition-all ease-linear duration-300 absolute top-[50%] translate-y-[-50%] bg-background-lm z-10 p-2 rounded-full invisible group-hover:visible right-2 opacity-80"
>
<BsChevronCompactRight size={31} />
</button>
)}
onClick={() => {
if (slideRef.current?.getCurrentIndex() === 1) {
window.open(
"https://actualizatucarro.mercadoshops.com.co/",
"_blank"
);
}
}}
/>
</section>
);
};
export default Banner;
14 changes: 14 additions & 0 deletions src/hooks/useMobile.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { useState, useEffect } from "react";

const useMobile = () => {
const [isMobile, setIsMobile] = useState(false);

useEffect(() => {
setIsMobile(window.innerWidth <= 600);
}, []);

return {
isMobile,
};
};
export default useMobile;

0 comments on commit e6d6590

Please sign in to comment.