@pagamio/frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
6 lines (5 loc) • 1.49 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const Pagination = ({ currentPage, totalPages, onPageChange, itemsPerPage, itemsPerPageOptions, onItemsPerPageChange, }) => {
return (_jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t border-gray-200 sm:px-6", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("span", { className: "text-sm text-gray-700", children: "Rows per page:" }), _jsx("select", { value: itemsPerPage, onChange: (e) => onItemsPerPageChange(Number(e.target.value)), className: "block w-20 pl-3 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md", children: itemsPerPageOptions.map((option) => (_jsx("option", { value: option, children: option }, option))) })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("button", { onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, className: "px-3 py-1 text-sm font-medium rounded-md text-gray-400 bg-gray-200 cursor-not-allowed", children: "Previous" }), _jsxs("span", { className: "text-sm text-gray-700", children: ["Page ", currentPage, " of ", totalPages] }), _jsx("button", { onClick: () => onPageChange(currentPage + 1), disabled: currentPage === totalPages, className: "px-3 py-1 text-sm font-medium rounded-md text-gray-400 bg-gray-200 cursor-not-allowed", children: "Next" })] })] }));
};
export default Pagination;