reza_krr/mip-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: handle images in gallery

Browse Source
This commit is contained in:
reza karimi
2025-08-22 12:41:44 +03:30
parent f2d2412d38
commit 877c0e6b33
1 changed files with 67 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/Gallery.js
+11 -18
View File
@@ -1,7 +1,7 @@
import React, { useEffect, useState} from 'react'; import React, { useEffect, useState } from 'react';
import axios from "axios"; import axios from "axios";
import AppContainer from "./appContainer"; import AppContainer from "./appContainer";
import {AppFile, AppUrl} from "../lib/api"; import { AppFile, AppUrl } from "../lib/api";
import Image from "next/image"; import Image from "next/image";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import { Suspense } from 'react' import { Suspense } from 'react'
@@ -12,8 +12,8 @@ import {
MDBContainer, MDBContainer,
MDBRow, MDBRow,
} from "mdb-react-ui-kit"; } from "mdb-react-ui-kit";
import {LightBox} from "react-lightbox-pack"; import { LightBox } from "react-lightbox-pack";
import {Button, Divider, Tab, TabList, TabPanel, TabPanels, Tabs} from "@chakra-ui/react"; import { Button, Divider, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
const APV = dynamic(() => import('./components/Videos'), { const APV = dynamic(() => import('./components/Videos'), {
ssr: false, ssr: false,
@@ -48,13 +48,13 @@ const Gallery = (dataImage) => {
} }
const Filter = async (filter) => { const Filter = async (filter) => {
const res = await axios.get(AppUrl(`FilterGalleyImages/${filter}`)); const res = await axios.get(AppUrl(`FilterGalleyImages/${filter}`));
SetImages({dataImage : res.data}) SetImages({ dataImage: res.data })
setFilterId(filter) setFilterId(filter)
} }
const AllImage = async () => { const AllImage = async () => {
const res = await axios.get(AppUrl(`GetGalleyImages`)); const res = await axios.get(AppUrl(`GetGalleyImages`));
SetImages({dataImage: res.data}) SetImages({ dataImage: res.data })
} }
// Handler // Handler
@@ -106,11 +106,8 @@ const Gallery = (dataImage) => {
{/* <Tab on className={'bk font-weight-bold'} _selected={{ color: 'white', bg: 'teal.500' }}>ویدئو ها</Tab> */} {/* <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> <Tab className={'bk font-weight-bold'} _selected={{ color: 'white', bg: 'teal.500' }}>تصاویر</Tab>
</TabList> </TabList>
<TabPanels>
<TabPanel> </Tabs>
<APV />
</TabPanel>
<TabPanel>
<div style={{ flexDirection: 'column' }} className={'flex justify-content-end flex-xl-row flex-lg-row flex-md-column flex-sm-column'}> <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(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={() => Filter(1)} color={filterId === 1 ? 'light' : 'light'} className={'m-2'}>تصاویر معماری</MDBBtn>
@@ -118,7 +115,7 @@ const Gallery = (dataImage) => {
</div> </div>
<Divider colorScheme={'gray'} /> <Divider colorScheme={'gray'} />
<MDBRow style={{ marginTop: 10 }}> <MDBRow style={{ marginTop: 10 }}>
{Images && Images.dataImage.map((image ,index)=> { {Images && Images.dataImage.map((image, index) => {
return ( return (
<MDBCol xs={12} sm={12} md={6} lg={3}> <MDBCol xs={12} sm={12} md={6} lg={3}>
<div className={'cardImage'} key={image.id}> <div className={'cardImage'} key={image.id}>
@@ -134,16 +131,12 @@ const Gallery = (dataImage) => {
}} }}
/> />
<br /> <br />
<span>{ image.title }</span> <span>{image.title}</span>
</div> </div>
</MDBCol> </MDBCol>
) )
})} })}
</MDBRow> </MDBRow>
</TabPanel>
</TabPanels>
</Tabs>
<LightBox <LightBox
state={toggle} state={toggle}
event={lightBoxHandler} event={lightBoxHandler}
@@ -169,7 +162,7 @@ export async function getServerSideProps(context) {
const res = await axios.get(AppUrl('GetGalleyImages')); const res = await axios.get(AppUrl('GetGalleyImages'));
return { return {
props: { props: {
dataImage : res.data dataImage: res.data
}, // will be passed to the page component as props }, // will be passed to the page component as props
} }
} }