PublicMirrors/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-01-23 05:24:55 +03:00
Code Issues Actions 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 { ChevronLeftIcon, ChevronRightIcon } from "@primer/octicons-react";
import { useFormat } from "@renderer/hooks/use-format";
interface PaginationProps {
page: number;
@ -27,6 +28,8 @@ export function Pagination({
startPage = Math.max(1, endPage - visiblePages + 1);
}
const { formatNumber } = useFormat();
return (
<div
style={{
@ -45,16 +48,29 @@ export function Pagination({
</Button>
{page > 2 && (
<div
style={{
width: 40,
justifyContent: "center",
display: "flex",
alignItems: "center",
}}
>
<span style={{ fontSize: 16 }}>...</span>
</div>
<>
{/* initial page */}
<Button
theme="outline"
onClick={() => onPageChange(1)}
style={{ width: 40, maxWidth: 40, maxHeight: 40 }}
disabled={page === 1}
>
{1}
</Button>
{/* ellipsis */}
<div
style={{
width: 40,
justifyContent: "center",
display: "flex",
alignItems: "center",
}}
>
<span style={{ fontSize: 16 }}>...</span>
</div>
</>
)}
{/* Page Buttons */}
@ -68,21 +84,34 @@ export function Pagination({
style={{ width: 40, maxWidth: 40, maxHeight: 40 }}
onClick={() => onPageChange(pageNumber)}
>
{pageNumber}
{formatNumber(pageNumber)}
</Button>
))}
{page < totalPages - 1 && (
<div
style={{
width: 40,
justifyContent: "center",
display: "flex",
alignItems: "center",
}}
>
<span style={{ fontSize: 16 }}>...</span>
</div>
<>
{/* ellipsis */}
<div
style={{
width: 40,
justifyContent: "center",
display: "flex",
alignItems: "center",
}}
>
<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 */}