nyne/nysoure
1
0
Fork 0
mirror of https://github.com/wgh136/nysoure.git synced 2025-09-27 20:27:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

format

Browse Source
This commit is contained in:
nyne
2025-06-04 10:20:01 +08:00
parent 7994ecc100
commit ad1144ad69
42 changed files with 5536 additions and 3740 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
frontend/src/components/pagination.tsx
View File

@@ -1,48 +1,106 @@
import {ReactNode} from "react";
import {MdChevronLeft, MdChevronRight} from "react-icons/md";
import { ReactNode } from "react";
import { MdChevronLeft, MdChevronRight } from "react-icons/md";
export default function Pagination({page, setPage, totalPages}: {
page: number,
setPage: (page: number) => void,
totalPages: number
export default function Pagination({
page,
setPage,
totalPages,
}: {
page: number;
setPage: (page: number) => void;
totalPages: number;
}) {
const items: ReactNode[] = [];
if (page > 1) {
items.push(<button key={"btn-1"} className="join-item btn" onClick={() => setPage(1)}>1</button>);
items.push(
<button
key={"btn-1"}
className="join-item btn"
onClick={() => setPage(1)}
>
1
</button>,
);
}
if (page - 2 > 1) {
items.push(<button key={"btn-2"} className="join-item btn">...</button>);
items.push(
<button key={"btn-2"} className="join-item btn">
...
</button>,
);
}
if (page - 1 > 1) {
items.push(<button key={"btn-3"} className="join-item btn" onClick={() => setPage(page - 1)}>{page - 1}</button>);
items.push(
<button
key={"btn-3"}
className="join-item btn"
onClick={() => setPage(page - 1)}
>
{page - 1}
</button>,
);
}
items.push(<button key={"btn-4"} className="join-item btn btn-active">{page}</button>);
items.push(
<button key={"btn-4"} className="join-item btn btn-active">
{page}
</button>,
);
if (page + 1 < totalPages) {
items.push(<button key={"btn-5"} className="join-item btn" onClick={() => setPage(page + 1)}>{page + 1}</button>);
items.push(
<button
key={"btn-5"}
className="join-item btn"
onClick={() => setPage(page + 1)}
>
{page + 1}
</button>,
);
}
if (page + 2 < totalPages) {
items.push(<button key={"btn-6"} className="join-item btn">...</button>);
items.push(
<button key={"btn-6"} className="join-item btn">
...
</button>,
);
}
if (page < totalPages) {
items.push(<button key={"btn-7"} className="join-item btn" onClick={() => setPage(totalPages)}>{totalPages}</button>);
items.push(
<button
key={"btn-7"}
className="join-item btn"
onClick={() => setPage(totalPages)}
>
{totalPages}
</button>,
);
}
return <div className="join shadow rounded-field">
<button key={"btn-prev"} className={`join-item btn`} onClick={() => {
if (page > 1) {
setPage(page - 1);
}
}}>
<MdChevronLeft size={20} className="opacity-50"/>
</button>
{items}
<button key={"btn-next"} className={`join-item btn`} onClick={() => {
if (page < totalPages) {
setPage(page + 1);
}
}}>
<MdChevronRight size={20} className="opacity-50"/>
</button>
</div>
}
return (
<div className="join shadow rounded-field">
<button
key={"btn-prev"}
className={`join-item btn`}
onClick={() => {
if (page > 1) {
setPage(page - 1);
}
}}
>
<MdChevronLeft size={20} className="opacity-50" />
</button>
{items}
<button
key={"btn-next"}
className={`join-item btn`}
onClick={() => {
if (page < totalPages) {
setPage(page + 1);
}
}}
>
<MdChevronRight size={20} className="opacity-50" />
</button>
</div>
);
}