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

make the mobile pagination look nicer
Some checks failed
Deploy Website / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Lee 2024-10-14 10:55:55 +01:00
parent eb06801026
commit a6b99219e1
2 changed files with 30 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
projects/website/src/components/input/pagination.tsx
View File

@ -10,6 +10,8 @@ import {
PaginationNext,
PaginationPrevious,
} from "../ui/pagination";
import * as React from "react";
import { ChevronDoubleLeftIcon, ChevronDoubleRightIcon } from "@heroicons/react/16/solid";
type PaginationItemWrapperProps = {
/**
@ -116,9 +118,11 @@ export default function Pagination({
pageNumbers.push(
<>
<PaginationItemWrapper key="start" isLoadingPage={isLoading}>
{!mobilePagination && (
<PaginationLink href={generatePageUrl ? generatePageUrl(1) : ""} onClick={e => handleLinkClick(1, e)}>
1
</PaginationLink>
)}
</PaginationItemWrapper>
{startPage > 2 && !mobilePagination && (
<PaginationItemWrapper key="ellipsis-start" isLoadingPage={isLoading}>
@ -149,6 +153,15 @@ export default function Pagination({
return (
<ShadCnPagination className="select-none scale-75">
<PaginationContent>
{/* ">>" before the Previous button in mobile mode */}
{mobilePagination && (
<PaginationItemWrapper key="mobile-start" isLoadingPage={isLoading}>
<PaginationLink href={generatePageUrl ? generatePageUrl(1) : ""} onClick={e => handleLinkClick(1, e)}>
<ChevronDoubleLeftIcon className="h-4 w-4" />
</PaginationLink>
</PaginationItemWrapper>
)}
{/* Previous button - disabled on the first page */}
<PaginationItemWrapper isLoadingPage={isLoading}>
<PaginationPrevious
@ -161,24 +174,6 @@ export default function Pagination({
{renderPageNumbers()}
{currentPage < totalPages && totalPages - currentPage > 2 && (
<>
{!mobilePagination && (
<PaginationItemWrapper key="ellipsis-end" isLoadingPage={isLoading}>
<PaginationEllipsis className="cursor-default" />
</PaginationItemWrapper>
)}
<PaginationItemWrapper key="end" isLoadingPage={isLoading}>
<PaginationLink
href={generatePageUrl ? generatePageUrl(totalPages) : ""}
onClick={e => handleLinkClick(totalPages, e)}
>
{totalPages}
</PaginationLink>
</PaginationItemWrapper>
</>
)}
{/* Next button - disabled on the last page */}
<PaginationItemWrapper isLoadingPage={isLoading}>
<PaginationNext
@ -188,6 +183,18 @@ export default function Pagination({
className={clsx(currentPage === totalPages && "cursor-not-allowed")}
/>
</PaginationItemWrapper>
{/* ">>" after the Next button in mobile mode */}
{mobilePagination && (
<PaginationItemWrapper key="mobile-end" isLoadingPage={isLoading}>
<PaginationLink
href={generatePageUrl ? generatePageUrl(totalPages) : ""}
onClick={e => handleLinkClick(totalPages, e)}
>
<ChevronDoubleRightIcon className="h-4 w-4" />
</PaginationLink>
</PaginationItemWrapper>
)}
</PaginationContent>
</ShadCnPagination>
);

3
projects/website/src/components/ui/pagination.tsx
View File

@ -1,4 +1,5 @@
import { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons";
import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/16/solid";
import { DotsHorizontalIcon } from "@radix-ui/react-icons";
import * as React from "react";
import { cn } from "@/common/utils";