94 lines
2.9 KiB
JavaScript
94 lines
2.9 KiB
JavaScript
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></AppContainer>
|
|
</div>
|
|
)
|
|
}
|
|
export async function getServerSideProps(context) {
|
|
// const res = await axios.get(AppUrl('GetGalleyImages'));
|
|
return {
|
|
props: {
|
|
dataImage: null
|
|
} // will be passed to the page component as props
|
|
}
|
|
}
|
|
export default Gallery
|