Add pagination support (#52)

* Add pagination support

* Change posts per page value to 10

* Change /blog/1 page to be same as /blog/
Modify canonical url to reflect current page

* Conditionally render pagination component
This commit is contained in:
Ahmad Al Maaz
2021-05-26 16:56:19 +03:00
committed by GitHub
parent 3c3cb9cbeb
commit 847f2537c3
5 changed files with 9439 additions and 21 deletions

36
components/Pagination.js Normal file
View File

@ -0,0 +1,36 @@
import Link from '@/components/Link'
export default function Pagination({ totalPages, currentPage }) {
const prevPage = parseInt(currentPage) - 1 > 0
const nextPage = parseInt(currentPage) + 1 <= parseInt(totalPages)
return (
<div className="pt-6 pb-8 space-y-2 md:space-y-5">
<nav className="flex justify-between">
{!prevPage && (
<button rel="previous" className="cursor-auto disabled:opacity-50" disabled={!prevPage}>
Previous
</button>
)}
{prevPage && (
<Link href={currentPage - 1 === 1 ? `/blog/` : `/blog/page/${currentPage - 1}`}>
<button rel="previous">Previous</button>
</Link>
)}
<span>
{currentPage} of {totalPages}
</span>
{!nextPage && (
<button rel="next" className="cursor-auto disabled:opacity-50" disabled={!nextPage}>
Next
</button>
)}
{nextPage && (
<Link href={`/blog/page/${currentPage + 1}`}>
<button rel="next">Next</button>
</Link>
)}
</nav>
</div>
)
}