svrjs/svrjs-nextjs-website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: limit pagination items to 5

Browse source
This commit is contained in:
Dorian Niemiec 2024-09-08 11:37:06 +02:00
parent ae24ae9ef2
commit ca2fe12101
1 changed files with 23 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
components/cards/BlogCards.tsx
View file

@ -56,6 +56,17 @@ const BlogCards: React.FC<BlogCardInterface> = async (props) => {
const totalPages = Math.ceil(totalPosts / cardsPerPage); const totalPages = Math.ceil(totalPosts / cardsPerPage);
let begPage = currentPage - 2;
let endPage = currentPage + 2;
if (endPage > totalPages) {
begPage -= endPage - totalPages;
endPage = totalPages;
}
if (begPage < 1) {
endPage += 1 - begPage;
begPage = 1;
}
return ( return (
<> <>
<section className="grid max-w-6xl gap-4 mx-auto sm:grid-cols-2 lg:grid-cols-3"> <section className="grid max-w-6xl gap-4 mx-auto sm:grid-cols-2 lg:grid-cols-3">
@ -120,16 +131,18 @@ const BlogCards: React.FC<BlogCardInterface> = async (props) => {
<PaginationPrevious href={`/blog/page/${currentPage - 1}`} /> <PaginationPrevious href={`/blog/page/${currentPage - 1}`} />
)} )}
</PaginationItem> </PaginationItem>
{Array.from({ length: totalPages }).map((_, i) => ( {Array.from({ length: totalPages > 5 ? 5 : totalPages }).map(
<PaginationItem key={i}> (_, i) => (
<PaginationLink <PaginationItem key={i}>
href={`/blog/page/${i + 1}`} <PaginationLink
isActive={currentPage === i + 1} href={`/blog/page/${begPage + i}`}
> isActive={currentPage === begPage + i}
{i + 1} >
</PaginationLink> {begPage + i}
</PaginationItem> </PaginationLink>
))} </PaginationItem>
)
)}
<PaginationItem> <PaginationItem>
{currentPage < totalPages && ( {currentPage < totalPages && (
<PaginationNext href={`/blog/page/${currentPage + 1}`} /> <PaginationNext href={`/blog/page/${currentPage + 1}`} />