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

71
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,16 +48,29 @@ export function Pagination({
</Button> </Button>
{page > 2 && ( {page > 2 && (
<div <>
style={{ {/* initial page */}
width: 40, <Button
justifyContent: "center", theme="outline"
display: "flex", onClick={() => onPageChange(1)}
alignItems: "center", style={{ width: 40, maxWidth: 40, maxHeight: 40 }}
}} disabled={page === 1}
> >
<span style={{ fontSize: 16 }}>...</span> {1}
</div> </Button>
{/* ellipsis */}
<div
style={{
width: 40,
justifyContent: "center",
display: "flex",
alignItems: "center",
}}
>
<span style={{ fontSize: 16 }}>...</span>
</div>
</>
)} )}
{/* Page Buttons */} {/* Page Buttons */}
@ -68,21 +84,34 @@ 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 && (
<div <>
style={{ {/* ellipsis */}
width: 40, <div
justifyContent: "center", style={{
display: "flex", width: 40,
alignItems: "center", justifyContent: "center",
}} display: "flex",
> alignItems: "center",
<span style={{ fontSize: 16 }}>...</span> }}
</div> >
<span style={{ fontSize: 16 }}>...</span>
</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 */}