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

Add comment functionality.

Browse Source
This commit is contained in:
nyne
2025-05-13 17:11:48 +08:00
parent 545432b4f1
commit 0dd2143664
16 changed files with 406 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,36 +1,48 @@
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 }) {
const items: ReactNode[] = [];
export default function Pagination({page, setPage, totalPages}: {
page: number,
setPage: (page: number) => void,
totalPages: number
}) {
const items: ReactNode[] = [];
if (page > 1) {
items.push(<button className="join-item btn" onClick={() => setPage(1)}>1</button>);
}
if (page - 2 > 1) {
items.push(<button className="join-item btn">...</button>);
}
if (page-1 > 1) {
items.push(<button className="join-item btn" onClick={() => setPage(page-1)}>{page-1}</button>);
}
items.push(<button className="join-item btn btn-active">{page}</button>);
if (page+1 < totalPages) {
items.push(<button className="join-item btn" onClick={() => setPage(page+1)}>{page+1}</button>);
}
if (page+2 < totalPages) {
items.push(<button className="join-item btn">...</button>);
}
if (page < totalPages) {
items.push(<button className="join-item btn" onClick={() => setPage(totalPages)}>{totalPages}</button>);
}
if (page > 1) {
items.push(<button className="join-item btn" onClick={() => setPage(1)}>1</button>);
}
if (page - 2 > 1) {
items.push(<button className="join-item btn">...</button>);
}
if (page - 1 > 1) {
items.push(<button className="join-item btn" onClick={() => setPage(page - 1)}>{page - 1}</button>);
}
items.push(<button className="join-item btn btn-active">{page}</button>);
if (page + 1 < totalPages) {
items.push(<button className="join-item btn" onClick={() => setPage(page + 1)}>{page + 1}</button>);
}
if (page + 2 < totalPages) {
items.push(<button className="join-item btn">...</button>);
}
if (page < totalPages) {
items.push(<button className="join-item btn" onClick={() => setPage(totalPages)}>{totalPages}</button>);
}
return <div className="join">
<button className={`join-item btn ${page === 1 && "btn-disabled"}`} onClick={() => setPage(page-1)}>
<MdChevronLeft size={20} className="opacity-50"/>
</button>
{items}
<button className={`join-item btn ${page === totalPages && "btn-disabled"}`} onClick={() => setPage(page+1)}>
<MdChevronRight size={20} className="opacity-50"/>
</button>
</div>
return <div className="join shadow rounded-field">
<button className={`join-item btn`} onClick={() => {
if (page > 1) {
setPage(page - 1);
}
}}>
<MdChevronLeft size={20} className="opacity-50"/>
</button>
{items}
<button className={`join-item btn`} onClick={() => {
if (page < totalPages) {
setPage(page + 1);
}
}}>
<MdChevronRight size={20} className="opacity-50"/>
</button>
</div>
}