pagamio-frontend-commons-lib/lib/dashboard-visuals/components/Pagination.js

Pagamio library for Frontend reusable components like the form engine and table container

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const PAGE_SIZES = [5, 10, 20, 50];
const Pagination = ({ currentPage, pageSize, totalItems, onPageChange, onPageSizeChange, }) => {
    const totalPages = Math.ceil(totalItems / pageSize);
    return (_jsxs("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4 mt-2 px-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-gray-600", children: "Items per page:" }), _jsx("select", { value: pageSize, onChange: (e) => onPageSizeChange(Number(e.target.value)), className: "border rounded-md px-2 py-1 text-sm bg-white", children: PAGE_SIZES.map((size) => (_jsx("option", { value: size, children: size }, size))) })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, className: "px-3 py-1 rounded-md border disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50", children: "Previous" }), _jsxs("span", { className: "text-sm text-gray-600", children: ["Page ", currentPage, " of ", totalPages] }), _jsx("button", { onClick: () => onPageChange(currentPage + 1), disabled: currentPage === totalPages, className: "px-3 py-1 rounded-md border disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50", children: "Next" })] })] }));
};
export default Pagination;