External/CoreControl
1
0
Fork 0
mirror of https://github.com/crocofied/CoreControl.git synced 2025-12-17 15:36:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Pagination component

Browse Source
This commit is contained in:
headlesdev 2025-05-18 12:40:11 +02:00
parent 1bb07bd90c
commit 8f9c560706
2 changed files with 42 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/dashboard/sites/SitesPage.tsx
View File

@ -5,6 +5,7 @@ import AddSite from "@/components/dialogues/AddSite";
import Sites from "@/components/cards/Sites"; import Sites from "@/components/cards/Sites";
import axios from "axios"; import axios from "axios";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Pagination from "@/components/Pagination";
interface SitesPageProps { interface SitesPageProps {
username: string; username: string;
@ -67,13 +68,12 @@ export default function SitesPage({ username, name }: SitesPageProps) {
))} ))}
</div> </div>
<div className="flex justify-center pt-4"> <Pagination
<div className="join"> currentPage={currentPage}
<button className="join-item btn" onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1}>«</button> totalItems={total}
<button className="join-item btn">Page {currentPage}</button> itemsPerPage={itemPerPage}
<button className="join-item btn" onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === Math.ceil(total / itemPerPage)}>»</button> onPageChange={handlePageChange}
</div> />
</div>
</main> </main>
</Sidebar> </Sidebar>
) )

35
components/Pagination.tsx Normal file
View File

@ -0,0 +1,35 @@
export default function Pagination({
currentPage,
totalItems,
itemsPerPage,
onPageChange
}: {
currentPage: number;
totalItems: number;
itemsPerPage: number;
onPageChange: (page: number) => void;
}) {
const totalPages = Math.ceil(totalItems / itemsPerPage);
return (
<div className="flex justify-center pt-4">
<div className="join">
<button
className="join-item btn"
onClick={() => onPageChange(currentPage - 1)}
disabled={currentPage === 1}
>
«
</button>
<button className="join-item btn">Page {currentPage}</button>
<button
className="join-item btn"
onClick={() => onPageChange(currentPage + 1)}
disabled={currentPage === totalPages}
>
»
</button>
</div>
</div>
);
}