analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
132 lines (130 loc) • 4.71 kB
JavaScript
// src/components/Table/TablePagination.tsx
import { CaretLeft, CaretRight, CaretDown } from "phosphor-react";
// src/utils/utils.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
return twMerge(clsx(inputs));
}
// src/components/Table/TablePagination.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var TablePagination = ({
totalItems,
currentPage,
totalPages,
itemsPerPage,
itemsPerPageOptions = [10, 20, 50, 100],
onPageChange,
onItemsPerPageChange,
itemLabel = "itens",
className,
...props
}) => {
const startItem = (currentPage - 1) * itemsPerPage + 1;
const handlePrevious = () => {
if (currentPage > 1) {
onPageChange(currentPage - 1);
}
};
const handleNext = () => {
if (currentPage < totalPages) {
onPageChange(currentPage + 1);
}
};
const handleItemsPerPageChange = (e) => {
if (onItemsPerPageChange) {
onItemsPerPageChange(Number(e.target.value));
}
};
const isFirstPage = currentPage === 1;
const isLastPage = currentPage === totalPages;
return /* @__PURE__ */ jsxs(
"div",
{
className: cn(
"flex flex-col sm:flex-row items-center gap-3 sm:gap-4 w-full bg-background-50 rounded-xl p-4",
"sm:justify-between",
className
),
...props,
children: [
/* @__PURE__ */ jsxs("span", { className: "font-normal text-xs leading-[14px] text-text-800", children: [
startItem,
" de ",
totalItems,
" ",
itemLabel
] }),
/* @__PURE__ */ jsxs("div", { className: "flex flex-wrap sm:flex-nowrap items-center gap-2 sm:gap-4 justify-center sm:justify-start", children: [
onItemsPerPageChange && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsx(
"select",
{
value: itemsPerPage,
onChange: handleItemsPerPageChange,
className: "w-24 h-9 py-0 px-3 pr-8 bg-background border border-border-300 rounded appearance-none cursor-pointer font-normal text-sm leading-[21px] text-text-900",
"aria-label": "Items por p\xE1gina",
children: itemsPerPageOptions.map((option) => /* @__PURE__ */ jsxs("option", { value: option, children: [
option,
" itens"
] }, option))
}
),
/* @__PURE__ */ jsx(
CaretDown,
{
size: 14,
weight: "regular",
className: "absolute right-3 top-1/2 -translate-y-1/2 text-background-600 pointer-events-none"
}
)
] }),
/* @__PURE__ */ jsxs("span", { className: "font-normal text-xs leading-[14px] text-text-950", children: [
"P\xE1gina ",
currentPage,
" de ",
totalPages
] }),
/* @__PURE__ */ jsxs(
"button",
{
onClick: handlePrevious,
disabled: isFirstPage,
className: cn(
"flex flex-row justify-center items-center py-2 px-4 gap-2 rounded-3xl transition-all",
isFirstPage ? "opacity-50 cursor-not-allowed" : "hover:bg-primary-950/10 cursor-pointer"
),
"aria-label": "P\xE1gina anterior",
children: [
/* @__PURE__ */ jsx(CaretLeft, { size: 12, weight: "bold", className: "text-primary-950" }),
/* @__PURE__ */ jsx("span", { className: "font-medium text-xs leading-[14px] text-primary-950", children: "Anterior" })
]
}
),
/* @__PURE__ */ jsxs(
"button",
{
onClick: handleNext,
disabled: isLastPage,
className: cn(
"flex flex-row justify-center items-center py-2 px-4 gap-2 rounded-3xl transition-all",
isLastPage ? "opacity-50 cursor-not-allowed" : "hover:bg-primary-950/10 cursor-pointer"
),
"aria-label": "Pr\xF3xima p\xE1gina",
children: [
/* @__PURE__ */ jsx("span", { className: "font-medium text-xs leading-[14px] text-primary-950", children: "Pr\xF3xima" }),
/* @__PURE__ */ jsx(CaretRight, { size: 12, weight: "bold", className: "text-primary-950" })
]
}
)
] })
]
}
);
};
TablePagination.displayName = "TablePagination";
var TablePagination_default = TablePagination;
export {
TablePagination_default as default
};
//# sourceMappingURL=index.mjs.map