mip-website/pages/Gallery.js

import React, { useEffect, useState} from 'react';
import axios from "axios";
import AppContainer from "./appContainer";
import {AppFile, AppUrl} from "../lib/api";
import Image from "next/image";
import dynamic from "next/dynamic";
import { Suspense } from 'react'

import {
    MDBBtn,
    MDBCol,
    MDBContainer,
    MDBRow,
} from "mdb-react-ui-kit";
import  {LightBox} from "react-lightbox-pack";
import {Button, Divider, Tab, TabList, TabPanel, TabPanels, Tabs} from "@chakra-ui/react";

const APV = dynamic(() => import('./components/Videos'), {
    ssr: false,
})
const shimmer = (w, h) => `
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="g">
      <stop stop-color="#333" offset="20%" />
      <stop stop-color="#222" offset="50%" />
      <stop stop-color="#333" offset="70%" />
    </linearGradient>
  </defs>
  <rect width="${w}" height="${h}" fill="#333" />
  <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
  <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
</svg>`

const toBase64 = (str) =>
    typeof window === 'undefined'
        ? Buffer.from(str).toString('base64')
        : window.btoa(str)

const Gallery = (dataImage) => {
    const [Images, SetImages] = useState(dataImage)
    const [justifyActive, setJustifyActive] = React.useState('tab1');
    const [toggle, setToggle] =  React.useState(false);
    const [sIndex, setSIndex] =  React.useState(0);
    const [filterId, setFilterId] =  React.useState(1);
    const Parallax = ({  quality }) => {
        return `../resource/parallax/Gallery.jpg`;
    }
    const Filter = async (filter) => {
        const res = await axios.get(AppUrl(`FilterGalleyImages/${filter}`));
        SetImages({dataImage : res.data})
        setFilterId(filter)
    }
    
    const AllImage = async () => {
        const res = await axios.get(AppUrl(`GetGalleyImages`));
        SetImages({dataImage: res.data})
    }

    // Handler
    const  lightBoxHandler  = (state, sIndex) => {
        setToggle(state);
        setSIndex(sIndex);
    };

    const handleJustifyClick = (value) => {
        if (value === justifyActive) {
            return;
        }

        setJustifyActive(value);
    };
    return (
        <div>
            <style jsx>
                {`
                  .cardImage {
                    background-color: #F3F4F6;
                    padding: 5px;
                    border-radius: 1rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    margin: 2px;
                  }
                `}
            </style>
            <AppContainer>
                <div className="parallax-container">
                    <h1  className={'center-align text-white header_back service-text dana font-weight-bold'}> گالری بیمارستان  </h1>
                    <Image
                        loader={Parallax}
                        src="Parallax.png"
                        className={'responsive-img shadow-5'}
                        placeholder="blur"
                        blurDataURL={`data:image/svg+xml;base64,${toBase64(shimmer(3000, 1300))}`}
                        alt="درباره بیارستان مهر ایرانیان پرند "
                        width={3000}
                        height={1300}
                     />
                </div>
               <MDBContainer>
                   <Tabs defaultIndex={1} className={'mt-5'} isFitted variant='enclosed'>
                       <TabList mb='1em'>
                           <Tab on className={'bk font-weight-bold'} _selected={{ color: 'white', bg: 'teal.500' }}>ویدئو ها</Tab>
                           <Tab  className={'bk font-weight-bold'}  _selected={{ color: 'white', bg: 'teal.500' }}>تصاویر</Tab>
                       </TabList>
                       <TabPanels>
                           <TabPanel>
                               <APV />
                           </TabPanel>
                           <TabPanel>
                               <div style={{ flexDirection: 'column' }} className={'flex justify-content-end flex-xl-row flex-lg-row flex-md-column flex-sm-column'}>
                                   <MDBBtn onClick={() => Filter(2)} color={filterId === 2 ? 'light' : 'light'} className={filterId === 2 ? 'm-2' : 'm-2 text-dark'}>تصاویر در حال ساخت</MDBBtn>
                                   <MDBBtn onClick={() => Filter(1)} color={filterId === 1 ? 'light' : 'light'} className={'m-2'}>تصاویر معماری</MDBBtn>
                                   <MDBBtn onClick={() => AllImage()} color={filterId !== 1 && 2 ? 'light' : 'light'} className={'m-2'}>همه تصاویر </MDBBtn>
                               </div>
                               <Divider colorScheme={'gray'} />
                               <MDBRow style={{ marginTop: 10 }}>
                                   {Images && Images.dataImage.map((image ,index)=> {
                                       return (
                                           <MDBCol xs={12} sm={12} md={6} lg={3}>
                                               <div className={'cardImage'} key={image.id}>
                                                   <img
                                                       key={image.id}
                                                       alt={image.title}
                                                       width={350}
                                                       style={{ cursor: 'zoom-in' }}
                                                       className={'responsive-img'}
                                                       src={AppFile(`panel-public/uploads/HospitalGallery/${image.imageAddr}`)}
                                                       onClick={() => {
                                                           lightBoxHandler(true, index);
                                                       }}
                                                   />
                                                   <br />
                                                   <span>{ image.title }</span>
                                               </div>
                                           </MDBCol>
                                       )
                                   })}
                               </MDBRow>
                           </TabPanel>
                       </TabPanels>
                   </Tabs>

                   <LightBox
                       state={toggle}
                       event={lightBoxHandler}
                       data={Images.dataImage}
                       imageWidth="60vw"
                       imageHeight="70vh"
                       thumbnailHeight={50}
                       thumbnailWidth={50}
                       setImageIndex={setSIndex}
                       imageIndex={sIndex}
                   />
                   <br />
                   <br />
                   <br />
                   <br />
               </MDBContainer>
            </AppContainer>

        </div>
    );
};
export async function getServerSideProps(context) {
    const res = await axios.get(AppUrl('GetGalleyImages'));
    return {
        props: {
            dataImage : res.data
        }, // will be passed to the page component as props
    }
}
export default Gallery;