79 lines
1.9 KiB
React
79 lines
1.9 KiB
React
|
import React from "react";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* PhotoGrid — Instagram-style masonry grid for Docusaurus.
|
||
|
|
*
|
||
|
|
* Usage in any .mdx page:
|
||
|
|
*
|
||
|
|
* import PhotoGrid from "@site/src/components/PhotoGrid";
|
||
|
|
*
|
||
|
|
* <PhotoGrid
|
||
|
|
* photos={[
|
||
|
|
* "/img/gallery/cat-01.jpg",
|
||
|
|
* "/img/gallery/sunset-02.webp",
|
||
|
|
* "/img/gallery/meme-03.png",
|
||
|
|
* ]}
|
||
|
|
* />
|
||
|
|
*
|
||
|
|
* Props:
|
||
|
|
* photos — string[] — paths relative to /static (required)
|
||
|
|
* columns — number — desktop columns, default 3
|
||
|
|
* gap — string — grid gap, default "12px"
|
||
|
|
*/
|
||
|
|
export default function PhotoGrid({ photos = [], columns = 3, gap = "12px" }) {
|
||
|
|
if (!photos.length) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<style>{`
|
||
|
|
.photo-grid {
|
||
|
|
column-count: ${columns};
|
||
|
|
column-gap: ${gap};
|
||
|
|
}
|
||
|
|
.photo-grid__item {
|
||
|
|
break-inside: avoid;
|
||
|
|
margin-bottom: ${gap};
|
||
|
|
cursor: pointer;
|
||
|
|
display: block;
|
||
|
|
border-radius: 6px;
|
||
|
|
overflow: hidden;
|
||
|
|
line-height: 0;
|
||
|
|
transition: opacity 0.2s ease;
|
||
|
|
}
|
||
|
|
.photo-grid__item:hover {
|
||
|
|
opacity: 0.85;
|
||
|
|
}
|
||
|
|
.photo-grid__item img {
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.photo-grid {
|
||
|
|
column-count: 1 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (min-width: 769px) and (max-width: 1024px) {
|
||
|
|
.photo-grid {
|
||
|
|
column-count: 2 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
`}</style>
|
||
|
|
|
||
|
|
<div className="photo-grid">
|
||
|
|
{photos.map((src, i) => (
|
||
|
|
<a
|
||
|
|
key={i}
|
||
|
|
className="photo-grid__item"
|
||
|
|
href={src}
|
||
|
|
target="_blank"
|
||
|
|
rel="noopener noreferrer"
|
||
|
|
>
|
||
|
|
<img src={src} alt="" loading="lazy" />
|
||
|
|
</a>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|