gib/Tech_Tracker_Web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make the pagination buttons better by conditionally rendering based on amount of pages

Browse Source
This commit is contained in:
Gabriel Brown 2024-07-30 10:17:43 -05:00
parent 44497ebe7b
commit 6b80930a86
1 changed files with 24 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/ui/History_Drawer.tsx
View File

@ -19,6 +19,7 @@ import {
import { import {
Pagination, Pagination,
PaginationContent, PaginationContent,
PaginationLink,
PaginationItem, PaginationItem,
PaginationNext, PaginationNext,
PaginationPrevious, PaginationPrevious,
@ -117,16 +118,30 @@ const History_Drawer: React.FC<History_Drawer_Props> = ({ user_id }) => {
/> />
</PaginationItem> </PaginationItem>
)} )}
<h3 className="text-center flex flex-row"> {totalPages > 10 && (
Page <h3 className="text-center flex flex-row">
<h3 className="font-bold mx-1"> Page
{page} <h3 className="font-bold mx-1">
{page}
</h3>
of
<h3 className="font-semibold ml-1">
{totalPages}
</h3>
</h3> </h3>
of )}
<h3 className="font-semibold ml-1"> {totalPages <= 10 && Array.from({ length: totalPages }).map((_, idx) => (
{totalPages} <PaginationItem key={idx}>
</h3> <PaginationLink
</h3> href="#"
onClick={(e) => {
e.preventDefault();
handlePageChange(idx + 1);
}}
>{idx + 1}
</PaginationLink>
</PaginationItem>
))}
{page < totalPages && ( {page < totalPages && (
<PaginationItem> <PaginationItem>
<PaginationNext <PaginationNext
@ -146,18 +161,4 @@ const History_Drawer: React.FC<History_Drawer_Props> = ({ user_id }) => {
</DrawerContent> </DrawerContent>
); );
}; };
export default History_Drawer; export default History_Drawer;
// If you want to show all page numbers:
//{Array.from({ length: totalPages }).map((_, idx) => (
//<PaginationItem key={idx}>
//<PaginationLink
//href="#"
//onClick={(e) => {
//e.preventDefault();
//handlePageChange(idx + 1);
//}}
//>{idx + 1}
//</PaginationLink>
//</PaginationItem>
//))}