PublicMirrors/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-02-02 16:23:48 +03:00
Code Issues Actions 1 Packages Projects Releases 1 Wiki Activity

feat: enhance pagination component with first and last page buttons

Browse Source
This commit is contained in:
Hachi-R 2024-12-23 18:15:48 -03:00
parent a4754c947f
commit 26a35a902c
1 changed files with 50 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/renderer/src/pages/catalogue/pagination.tsx
View File

@ -1,5 +1,6 @@
import { Button } from "@renderer/components/button/button"; import { Button } from "@renderer/components/button/button";
import { ChevronLeftIcon, ChevronRightIcon } from "@primer/octicons-react"; import { ChevronLeftIcon, ChevronRightIcon } from "@primer/octicons-react";
import { useFormat } from "@renderer/hooks/use-format";
interface PaginationProps { interface PaginationProps {
page: number; page: number;
@ -27,6 +28,8 @@ export function Pagination({
startPage = Math.max(1, endPage - visiblePages + 1); startPage = Math.max(1, endPage - visiblePages + 1);
} }
const { formatNumber } = useFormat();
return ( return (
<div <div
style={{ style={{
@ -45,6 +48,18 @@ export function Pagination({
</Button> </Button>
{page > 2 && ( {page > 2 && (
<>
{/* initial page */}
<Button
theme="outline"
onClick={() => onPageChange(1)}
style={{ width: 40, maxWidth: 40, maxHeight: 40 }}
disabled={page === 1}
>
{1}
</Button>
{/* ellipsis */}
<div <div
style={{ style={{
width: 40, width: 40,
@ -55,6 +70,7 @@ export function Pagination({
> >
<span style={{ fontSize: 16 }}>...</span> <span style={{ fontSize: 16 }}>...</span>
</div> </div>
</>
)} )}
{/* Page Buttons */} {/* Page Buttons */}
@ -68,11 +84,13 @@ export function Pagination({
style={{ width: 40, maxWidth: 40, maxHeight: 40 }} style={{ width: 40, maxWidth: 40, maxHeight: 40 }}
onClick={() => onPageChange(pageNumber)} onClick={() => onPageChange(pageNumber)}
> >
{pageNumber} {formatNumber(pageNumber)}
</Button> </Button>
))} ))}
{page < totalPages - 1 && ( {page < totalPages - 1 && (
<>
{/* ellipsis */}
<div <div
style={{ style={{
width: 40, width: 40,
@ -83,6 +101,17 @@ export function Pagination({
> >
<span style={{ fontSize: 16 }}>...</span> <span style={{ fontSize: 16 }}>...</span>
</div> </div>
{/* last page */}
<Button
theme="outline"
onClick={() => onPageChange(totalPages)}
style={{ width: 40, maxWidth: 40, maxHeight: 40 }}
disabled={page === totalPages}
>
{formatNumber(totalPages)}
</Button>
</>
)} )}
{/* Next Button */} {/* Next Button */}