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);
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 (
<>
<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}`} />
)}
</PaginationItem>
{Array.from({ length: totalPages }).map((_, i) => (
<PaginationItem key={i}>
<PaginationLink
href={`/blog/page/${i + 1}`}
isActive={currentPage === i + 1}
>
{i + 1}
</PaginationLink>
</PaginationItem>
))}
{Array.from({ length: totalPages > 5 ? 5 : totalPages }).map(
(_, i) => (
<PaginationItem key={i}>
<PaginationLink
href={`/blog/page/${begPage + i}`}
isActive={currentPage === begPage + i}
>
{begPage + i}
</PaginationLink>
</PaginationItem>
)
)}
<PaginationItem>
{currentPage < totalPages && (
<PaginationNext href={`/blog/page/${currentPage + 1}`} />