54 lines
1.8 KiB
JavaScript
54 lines
1.8 KiB
JavaScript
|
import ReactPaginate from "react-paginate";
|
||
|
|
import { useRouter } from "next/router";
|
||
|
|
import Image from 'next/image';
|
||
|
|
import getConfig from 'next/config'
|
||
|
|
|
||
|
|
const GalleryPager = ({gallery, basepath}) => {
|
||
|
|
|
||
|
|
const router = useRouter()
|
||
|
|
|
||
|
|
console.log(gallery)
|
||
|
|
|
||
|
|
const handlePagination = page => {
|
||
|
|
const path = router.pathname
|
||
|
|
const query = router.query
|
||
|
|
query.page = page.selected + 1
|
||
|
|
router.push({
|
||
|
|
pathname: path,
|
||
|
|
query: query,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="episode_pages col-sm-12">
|
||
|
|
<div className="card-columns">
|
||
|
|
{gallery.data.map((galleryImage) => {
|
||
|
|
var imageUrl = basepath + galleryImage.attributes.Image.data.attributes.formats.small.url
|
||
|
|
return (
|
||
|
|
<div className="card p-3">
|
||
|
|
<Image
|
||
|
|
src={imageUrl}
|
||
|
|
layout="responsive"
|
||
|
|
height={galleryImage.attributes.Image.data.attributes.formats.small.height}
|
||
|
|
width={galleryImage.attributes.Image.data.attributes.formats.small.width}
|
||
|
|
key={galleryImage.attributes.id}
|
||
|
|
className="card-img-top"
|
||
|
|
alt={galleryImage.attributes.Title}></Image>
|
||
|
|
</div>
|
||
|
|
)})}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ReactPaginate
|
||
|
|
marginPagesDisplayed={2}
|
||
|
|
pageRangeDisplayed={5}
|
||
|
|
previousLabel={"previous"}
|
||
|
|
nextLabel={"next"}
|
||
|
|
breakLabel={"..."}
|
||
|
|
initialPage={gallery.page}
|
||
|
|
pageCount={gallery.meta.pagination.pageCount}
|
||
|
|
onPageChange={handlePagination} />
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default GalleryPager
|