90 lines
3.3 KiB
JavaScript
90 lines
3.3 KiB
JavaScript
import React from 'react'
|
|
import pImg1 from '/public/images/portfolio/1.jpg'
|
|
import pImg2 from '/public/images/portfolio/2.jpg'
|
|
import pImg3 from '/public/images/portfolio/3.jpg'
|
|
import pImg4 from '/public/images/portfolio/4.jpg'
|
|
import pImg5 from '/public/images/portfolio/5.jpg'
|
|
import pImg6 from '/public/images/portfolio/6.jpg'
|
|
import pImg7 from '/public/images/portfolio/7.jpg'
|
|
import pImg8 from '/public/images/portfolio/8.jpg'
|
|
import pImg9 from '/public/images/portfolio/9.jpg'
|
|
import Lightbox from "yet-another-react-lightbox";
|
|
import Zoom from "yet-another-react-lightbox/plugins/zoom";
|
|
import "yet-another-react-lightbox/styles.css";
|
|
import Masonry, { ResponsiveMasonry } from "react-responsive-masonry"
|
|
import Image from "next/image";
|
|
|
|
const images = [
|
|
pImg1,
|
|
pImg2,
|
|
pImg3,
|
|
pImg4,
|
|
pImg5,
|
|
pImg6,
|
|
pImg7,
|
|
pImg8,
|
|
pImg9,
|
|
]
|
|
|
|
const PortfolioSection = (props) => {
|
|
|
|
const imageSizes = [16, 32, 48, 64, 96, 128, 256, 384];
|
|
const deviceSizes = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
|
|
|
|
function nextImageUrl(src, size) {
|
|
return `/_next/image?url=${encodeURIComponent(src)}&w=${size}&q=75`;
|
|
}
|
|
|
|
const slides = images.map(({ src, width, height }) => ({
|
|
width,
|
|
height,
|
|
src: nextImageUrl(src, width),
|
|
srcSet: imageSizes
|
|
.concat(...deviceSizes)
|
|
.filter((size) => size <= width)
|
|
.map((size) => ({
|
|
src: nextImageUrl(src, size),
|
|
width: size,
|
|
height: Math.round((height / width) * size),
|
|
})),
|
|
}));
|
|
|
|
const [open, setOpen] = React.useState(false);
|
|
|
|
return (
|
|
|
|
<section className={`wpo-portfolio-section section-padding ${props.prClass}`} id="gallery">
|
|
<div className="container">
|
|
<div className="sortable-gallery">
|
|
<div className="gallery-filters"></div>
|
|
<div className="row">
|
|
<div className="col-lg-12">
|
|
<div className="portfolio-grids gallery-container clearfix">
|
|
<ResponsiveMasonry columnsCountBreakPoints={{ 350: 1, 750: 2, 900: 3 }}>
|
|
<Masonry columnsCount={3} gutter="15px">
|
|
{images.map((item, pitem) => (
|
|
<div className="grid" key={pitem} onClick={() => setOpen(true)}>
|
|
<div className="img-holder">
|
|
<Image src={item} alt="" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</Masonry>
|
|
</ResponsiveMasonry>
|
|
|
|
<Lightbox
|
|
open={open}
|
|
close={() => setOpen(false)}
|
|
slides={slides}
|
|
plugins={[Zoom]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default PortfolioSection; |