52 lines
No EOL
1.7 KiB
JavaScript
Executable file
52 lines
No EOL
1.7 KiB
JavaScript
Executable file
import ReactPaginate from "react-paginate";
|
|
import { useRouter } from "next/router";
|
|
import Image from "next/legacy/image";
|
|
import { Link } from "react-router-dom";
|
|
|
|
const GalleryList = ({gallery, basepath}) => {
|
|
const router = useRouter()
|
|
|
|
const handlePagination = page => {
|
|
const path = router.pathname
|
|
const query = router.query
|
|
query.page = page.selected + 1
|
|
router.push({
|
|
pathname: path,
|
|
query: query,
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{gallery.data.map((gall) => {
|
|
var image = gall.attributes.gallery_images.data[0].attributes.Image
|
|
var imageUrl = basepath + image.data.attributes.formats.small.url
|
|
return (
|
|
<a href={"/galleries/" + gall.attributes.Slug}>
|
|
<div>{gall.attributes.Title}
|
|
<Image
|
|
src={imageUrl}
|
|
layout="responsive"
|
|
height={image.data.attributes.formats.small.height}
|
|
width={image.data.attributes.formats.small.width}
|
|
key={image.data.attributes.id}
|
|
className="card-img-top"
|
|
alt={gall.attributes.Title}></Image>
|
|
</div>
|
|
</a>
|
|
)
|
|
})}
|
|
<ReactPaginate
|
|
marginPagesDisplayed={2}
|
|
pageRangeDisplayed={5}
|
|
previousLabel={"previous"}
|
|
nextLabel={"next"}
|
|
breakLabel={"..."}
|
|
initialPage={gallery.meta.pagination.page}
|
|
pageCount={gallery.meta.pagination.pageCount}
|
|
onPageChange={handlePagination} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default GalleryList |