fix: handle images in gallery

pages/Gallery.js

@@ -1,7 +1,7 @@
-import React, { useEffect, useState} from 'react';
+import React, { useEffect, useState } from 'react';
 import axios from "axios";
 import AppContainer from "./appContainer";
-import {AppFile, AppUrl} from "../lib/api";
+import { AppFile, AppUrl } from "../lib/api";
 import Image from "next/image";
 import dynamic from "next/dynamic";
 import { Suspense } from 'react'
@@ -12,8 +12,8 @@ import {
     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";
+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,
@@ -48,13 +48,13 @@ const Gallery = (dataImage) => {
     }
     const Filter = async (filter) => {
         const res = await axios.get(AppUrl(`FilterGalleyImages/${filter}`));
-        SetImages({dataImage : res.data})
+        SetImages({ dataImage: res.data })
         setFilterId(filter)
     }
 
     const AllImage = async () => {
         const res = await axios.get(AppUrl(`GetGalleyImages`));
-        SetImages({dataImage: res.data})
+        SetImages({ dataImage: res.data })
     }
 
     // Handler
@@ -106,11 +106,8 @@ const Gallery = (dataImage) => {
                             {/* <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>
+
+                    </Tabs>
                     <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>
@@ -118,7 +115,7 @@ const Gallery = (dataImage) => {
                     </div>
                     <Divider colorScheme={'gray'} />
                     <MDBRow style={{ marginTop: 10 }}>
-                                   {Images && Images.dataImage.map((image ,index)=> {
+                        {Images && Images.dataImage.map((image, index) => {
                             return (
                                 <MDBCol xs={12} sm={12} md={6} lg={3}>
                                     <div className={'cardImage'} key={image.id}>
@@ -134,16 +131,12 @@ const Gallery = (dataImage) => {
                                             }}
                                         />
                                         <br />
-                                                   <span>{ image.title }</span>
+                                        <span>{image.title}</span>
                                     </div>
                                 </MDBCol>
                             )
                         })}
                     </MDBRow>
-                           </TabPanel>
-                       </TabPanels>
-                   </Tabs>
-
                     <LightBox
                         state={toggle}
                         event={lightBoxHandler}
@@ -169,7 +162,7 @@ export async function getServerSideProps(context) {
     const res = await axios.get(AppUrl('GetGalleyImages'));
     return {
         props: {
-            dataImage : res.data
+            dataImage: res.data
         }, // will be passed to the page component as props
     }
 }