Fascinated/scoresaber-reloadedv3
Archived
1
1
Fork 0
Code Issues 1 Pull Requests 2 Actions Packages Activity

cleanup pagination
All checks were successful
Deploy SSR / deploy (push) Successful in 1m11s
Details

Browse Source
This commit is contained in:
Lee 2024-09-12 15:08:25 +01:00
parent 574b1a6532
commit 1f4b1d10af
2 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/input/pagination.tsx
View File

@ -97,9 +97,12 @@ export default function Pagination({ mobilePagination, page, totalPages, loading
<PaginationItemWrapper key="start" isLoadingPage={isLoading}> <PaginationItemWrapper key="start" isLoadingPage={isLoading}>
<PaginationLink onClick={() => handlePageChange(1)}>1</PaginationLink> <PaginationLink onClick={() => handlePageChange(1)}>1</PaginationLink>
</PaginationItemWrapper> </PaginationItemWrapper>
{/* Only show ellipsis if more than 2 pages from the start */}
{startPage > 2 && (
<PaginationItemWrapper key="ellipsis-start" isLoadingPage={isLoading}> <PaginationItemWrapper key="ellipsis-start" isLoadingPage={isLoading}>
<PaginationEllipsis /> <PaginationEllipsis />
</PaginationItemWrapper> </PaginationItemWrapper>
)}
</> </>
); );
} }
@ -129,7 +132,7 @@ export default function Pagination({ mobilePagination, page, totalPages, loading
{renderPageNumbers()} {renderPageNumbers()}
{/* For desktop, show ellipsis and link to the last page */} {/* For desktop, show ellipsis and link to the last page */}
{!mobilePagination && currentPage < totalPages && ( {!mobilePagination && currentPage < totalPages && totalPages - currentPage > 2 && (
<> <>
<PaginationItemWrapper key="ellipsis-end" isLoadingPage={isLoading}> <PaginationItemWrapper key="ellipsis-end" isLoadingPage={isLoading}>
<PaginationEllipsis className="cursor-default" /> <PaginationEllipsis className="cursor-default" />

16
src/components/ui/pagination.tsx
View File

@ -1,5 +1,5 @@
import * as React from "react";
import { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons"; import { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons";
import * as React from "react";
import { cn } from "@/common/utils"; import { cn } from "@/common/utils";
import { ButtonProps, buttonVariants } from "@/components/ui/button"; import { ButtonProps, buttonVariants } from "@/components/ui/button";
@ -47,16 +47,14 @@ const PaginationLink = ({ className, isActive, size = "icon", ...props }: Pagina
PaginationLink.displayName = "PaginationLink"; PaginationLink.displayName = "PaginationLink";
const PaginationPrevious = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => ( const PaginationPrevious = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
<PaginationLink aria-label="Go to previous page" size="default" className={cn("gap-1 pl-2.5", className)} {...props}> <PaginationLink aria-label="Go to previous page" size="default" className={cn("gap-1", className)} {...props}>
<ChevronLeftIcon className="h-4 w-4" /> <ChevronLeftIcon className="h-4 w-4" />
<span>Previous</span>
</PaginationLink> </PaginationLink>
); );
PaginationPrevious.displayName = "PaginationPrevious"; PaginationPrevious.displayName = "PaginationPrevious";
const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => ( const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
<PaginationLink aria-label="Go to next page" size="default" className={cn("gap-1 pr-2.5", className)} {...props}> <PaginationLink aria-label="Go to next page" size="default" className={cn("gap-1", className)} {...props}>
<span>Next</span>
<ChevronRightIcon className="h-4 w-4" /> <ChevronRightIcon className="h-4 w-4" />
</PaginationLink> </PaginationLink>
); );
@ -73,9 +71,9 @@ PaginationEllipsis.displayName = "PaginationEllipsis";
export { export {
Pagination, Pagination,
PaginationContent, PaginationContent,
PaginationLink,
PaginationItem,
PaginationPrevious,
PaginationNext,
PaginationEllipsis, PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
}; };