parsa/parsaaghayi-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pagination got responsive

Browse Source
This commit is contained in:
parsa aghaei 2024-10-14 15:10:22 +03:30
parent fe6344ece5
commit f7e8b042ec
1 changed files with 48 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
src/app/(routes)/blog/components/pagination/pagination.tsx
View File

@ -86,53 +86,57 @@ const Pagination: React.FC<PaginationProps> = ({ meta }) => {
};
return (
<div className="mt-4 flex items-center justify-center gap-2">
{/* First Page */}
{current_page > 1 && (
<Link
href={generatePageLink(1)}
className="rounded-full border bg-[#EAEAEA] px-3 py-1 text-blog-text-default hover:bg-[#d6d6d6]"
aria-label="First Page"
>
First
</Link>
)}
{/* Previous Page */}
{current_page > 1 && (
<Link
href={generatePageLink(current_page - 1)}
className="rounded-full border bg-[#EAEAEA] px-4 py-0 text-[24px] text-blog-text-default hover:bg-[#d6d6d6]"
aria-label="Previous Page"
>
{"<"}
</Link>
)}
<div className="mt-4 flex flex-wrap items-center justify-center gap-2">
{/* Page Numbers */}
{renderPageNumbers()}
<div className="flex gap-2">{renderPageNumbers()}</div>
{/* Next Page */}
{current_page < last_page && (
<Link
href={generatePageLink(current_page + 1)}
className="rounded-full border bg-[#EAEAEA] px-4 py-0 text-[24px] text-blog-text-default hover:bg-[#d6d6d6]"
aria-label="Next Page"
>
{">"}
</Link>
)}
<div className="flex gap-2">
{/* First Page */}
{current_page > 1 && (
<Link
href={generatePageLink(1)}
className="rounded-full border bg-[#EAEAEA] px-3 py-1 text-blog-text-default hover:bg-[#d6d6d6]"
aria-label="First Page"
>
First
</Link>
)}
{/* Last Page */}
{current_page < last_page && (
<Link
href={generatePageLink(last_page)}
className="rounded-full border bg-[#EAEAEA] px-3 py-1 text-blog-text-default hover:bg-[#d6d6d6]"
aria-label="Last Page"
>
Last
</Link>
)}
{/* Previous Page */}
{current_page > 1 && (
<Link
href={generatePageLink(current_page - 1)}
className="rounded-full border bg-[#EAEAEA] px-4 py-0 text-[24px] text-blog-text-default hover:bg-[#d6d6d6]"
aria-label="Previous Page"
>
{"<"}
</Link>
)}
</div>
<div className="flex gap-2">
{/* Next Page */}
{current_page < last_page && (
<Link
href={generatePageLink(current_page + 1)}
className="rounded-full border bg-[#EAEAEA] px-4 py-0 text-[24px] text-blog-text-default hover:bg-[#d6d6d6]"
aria-label="Next Page"
>
{">"}
</Link>
)}
{/* Last Page */}
{current_page < last_page && (
<Link
href={generatePageLink(last_page)}
className="rounded-full border bg-[#EAEAEA] px-3 py-1 text-blog-text-default hover:bg-[#d6d6d6]"
aria-label="Last Page"
>
Last
</Link>
)}
</div>
</div>
);
};