gallery finished

Websites/jefes-nextjs/app/components/WSPGallery/page.tsx

@@ -2,23 +2,64 @@
 import React, { useState } from "react";
 import "./wspgallery.css";
 import Image from "next/image";
+import { FaCircleChevronLeft, FaCircleChevronRight } from "react-icons/fa6";
+import { AiOutlineClose } from "react-icons/ai";
 
 const WSPGallery = ({ galleryImages }) => {
   const [slideNumber, setSlideNumber] = useState(0);
   const [openModal, setOpenModal] = useState(false);
 
+  const handleOpenModal = (index) => {
+    setSlideNumber(index);
+    setOpenModal(true);
+  };
+
+  const handleCloseModal = () => {
+    setOpenModal(false);
+  };
+  const prevSlide = () => {
+    slideNumber === 0
+      ? setSlideNumber(galleryImages.length - 1)
+      : setSlideNumber(slideNumber - 1);
+  };
+  const nextSlide = () => {
+    slideNumber + 1 === galleryImages.length
+      ? setSlideNumber(0)
+      : setSlideNumber(slideNumber + 1);
+  };
+
   return (
     <div>
-      <div className="flex flex-wrap gap-10 items-center justify-center max-w-[620px] my-auto">
+      {openModal && (
+        <div className="sliderWrap">
+          <AiOutlineClose className="btnClose" onClick={handleCloseModal} />
+          <FaCircleChevronLeft className="btnPrev" onClick={prevSlide} />
+          <FaCircleChevronRight className="btnNext" onClick={nextSlide} />
+          <div className="fullScreenImage">
+            <Image
+              src={galleryImages[slideNumber].img}
+              alt="/"
+              fill
+              style={{ objectFit: "contain" }}
+              className="cursor-pointer"
+              onClick={() => handleOpenModal(index)}
+            />
+          </div>
+        </div>
+      )}
+
+      <div className="galleryWrap">
         {galleryImages &&
           galleryImages.map((slide, index) => {
             return (
-              <div className="single" key={index}>
+              <div className="single w-[200px] " key={index}>
                 <Image
                   src={slide.img}
                   alt="/"
                   width={100}
                   height={100}
+                  className="cursor-pointer"
+                  onClick={() => handleOpenModal(index)}
                 />
               </div>
             );

Websites/jefes-nextjs/app/components/WSPGallery/wspgallery.css

@@ -0,0 +1,83 @@
+.galleryWrap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  max-width: 620px;
+  margin: 0 auto;
+}
+
+.galleryWrap .single {
+  width: 200px;
+}
+
+.galleryWrap .single > Image {
+  max-width: 100%;
+}
+
+.galleryWrap .single > Image:hover {
+  transform: scale(1.02);
+}
+
+.sliderWrap {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 999;
+  background-color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.sliderWrap .btnClose,
+.sliderWrap .btnPrev,
+.sliderWrap .btnNext {
+  position: fixed;
+  cursor: pointer;
+  opacity: 0.6;
+  color: #fff;
+  z-index: 9999;
+}
+
+.btnNext:hover,
+.btnPrev:hover,
+.btnClose:hover {
+  opacity: 1;
+}
+
+.sliderWrap .btnClose {
+  top: 40px;
+  right: 40px;
+}
+.sliderWrap .btnPrev {
+  top: 50%;
+  transform: translateY(-50%);
+  left: 40px;
+}
+.sliderWrap .btnNext {
+  top: 50%;
+  transform: translateY(-50%);
+  right: 40px;
+}
+
+.fullScreenImage {
+  width: calc(100% - 40px);
+  height: calc(100% -40px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.fullScreenImage > Image {
+  max-width: 100%;
+  max-height: 100%;
+  pointer-events: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}

Websites/jefes-nextjs/tsconfig.json

@@ -9,6 +9,7 @@
     "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "bundler",
+    "noImplicitAny": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",