52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
interface PaginationProps {
|
|
page: number;
|
|
previousPage?: number;
|
|
nextPage?: number;
|
|
total?: number;
|
|
limit?: number;
|
|
onPageChange: (page: number) => void;
|
|
}
|
|
|
|
export function Pagination({
|
|
page,
|
|
previousPage,
|
|
nextPage,
|
|
total,
|
|
limit,
|
|
onPageChange,
|
|
}: PaginationProps) {
|
|
if (!previousPage && !nextPage) {
|
|
return null;
|
|
}
|
|
|
|
const totalPages = total && limit ? Math.ceil(total / limit) : undefined;
|
|
|
|
return (
|
|
<div className="mt-4 flex w-full items-center justify-center gap-4 text-content">
|
|
{previousPage && previousPage > 0 ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => onPageChange(previousPage)}
|
|
className="w-24 rounded bg-surface p-2 text-center text-sm font-medium shadow-lg hover:bg-surface-strong focus:outline-none"
|
|
>
|
|
◄
|
|
</button>
|
|
) : null}
|
|
{totalPages ? (
|
|
<span className="text-sm text-content-muted">
|
|
Page {page} of {totalPages}
|
|
</span>
|
|
) : null}
|
|
{nextPage && nextPage > 0 ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => onPageChange(nextPage)}
|
|
className="w-24 rounded bg-surface p-2 text-center text-sm font-medium shadow-lg hover:bg-surface-strong focus:outline-none"
|
|
>
|
|
►
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|