39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
export default function Pagination(props: {
|
|
currentPage: number;
|
|
totalPages: number;
|
|
onPrev: () => void;
|
|
onNext: () => void;
|
|
}) {
|
|
const { currentPage, totalPages, onPrev, onNext } = props;
|
|
|
|
return (
|
|
<div className="mt-4 flex items-center justify-between text-xs text-zinc-400">
|
|
<div>
|
|
Page{" "}
|
|
<span className="font-semibold text-zinc-200">{currentPage}</span>{" "}
|
|
of{" "}
|
|
<span className="font-semibold text-zinc-200">{totalPages}</span>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={onPrev}
|
|
disabled={currentPage === 1}
|
|
className="rounded border border-zinc-700 bg-zinc-900/70 px-3 py-1 hover:bg-zinc-800 disabled:opacity-40"
|
|
>
|
|
Previous
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={onNext}
|
|
disabled={currentPage === totalPages}
|
|
className="rounded border border-zinc-700 bg-zinc-900/70 px-3 py-1 hover:bg-zinc-800 disabled:opacity-40"
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |