tharikida-ui
Version:
A modern, lightweight React UI component library with built-in theming, accessibility, and full TypeScript support. Create beautiful, responsive, and customizable web apps faster with ready-to-use components for any project.
108 lines (107 loc) • 5.43 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useTheme } from "../../theme/ThemeProvider";
const Pagination = ({ page, pageCount, onPageChange, styles = {}, className = "", cornerRadius, primaryColor, textColor, backgroundColor, borderColor, borderWidth, borderStyle, fontFamily, fontSize, fontWeight, transitionDuration, spacingfactor, hoverColor, }) => {
const theme = useTheme();
const t = {
primaryColor: primaryColor || theme.primaryColor,
textColor: textColor || theme.textColor,
backgroundColor: backgroundColor || theme.backgroundColor,
borderColor: borderColor || theme.borderColor,
borderWidth: borderWidth ?? theme.borderWidth,
borderStyle: borderStyle ?? theme.borderStyle,
cornerRadius: typeof cornerRadius === "number" ? cornerRadius : theme.cornerRadius,
fontFamily: fontFamily || theme.fontFamily,
fontSize: fontSize || theme.fontSize,
fontWeight: fontWeight || theme.fontWeight,
transitionDuration: transitionDuration || theme.transitionDuration,
spacingfactor: spacingfactor || theme.spacingfactor,
hoverColor: hoverColor || theme.hoverColor,
};
// Helper to generate page numbers with ellipsis
const getPages = () => {
const pages = [];
if (pageCount <= 7) {
for (let i = 1; i <= pageCount; i++)
pages.push(i);
}
else {
if (page <= 4) {
pages.push(1, 2, 3, 4, 5, "...", pageCount);
}
else if (page >= pageCount - 3) {
pages.push(1, "...", pageCount - 4, pageCount - 3, pageCount - 2, pageCount - 1, pageCount);
}
else {
pages.push(1, "...", page - 1, page, page + 1, "...", pageCount);
}
}
return pages;
};
const pages = getPages();
return (_jsxs("nav", { style: {
display: "flex",
alignItems: "center",
gap: t.spacingfactor,
fontFamily: t.fontFamily,
fontSize: t.fontSize,
background: t.backgroundColor,
...styles,
}, className: className, "aria-label": "pagination", children: [_jsx("button", { onClick: () => onPageChange(Math.max(1, page - 1)), disabled: page === 1, style: {
background: t.primaryColor,
color: t.textColor,
border: `${t.borderWidth} ${t.borderStyle} ${t.borderColor}`,
borderRadius: t.cornerRadius,
padding: `4px 12px`,
fontWeight: t.fontWeight,
fontFamily: t.fontFamily,
fontSize: t.fontSize,
cursor: page === 1 ? "not-allowed" : "pointer",
opacity: page === 1 ? 0.5 : 1,
boxShadow: `1px 1px 0px ${t.borderColor}`,
transition: t.transitionDuration,
}, children: "Prev" }), pages.map((p, idx) => p === "..." ? (_jsx("span", { style: {
padding: `0 ${t.spacingfactor}px`,
color: t.textColor,
fontWeight: t.fontWeight,
fontFamily: t.fontFamily,
fontSize: t.fontSize,
}, children: "..." }, "ellipsis-" + idx)) : (_jsx("button", { onClick: () => onPageChange(Number(p)), style: {
background: p === page ? t.textColor : t.primaryColor,
color: p === page ? t.primaryColor : t.textColor,
border: `${t.borderWidth} ${t.borderStyle} ${t.borderColor}`,
borderRadius: t.cornerRadius,
padding: `4px 12px`,
fontWeight: t.fontWeight,
fontFamily: t.fontFamily,
fontSize: t.fontSize,
cursor: "pointer",
boxShadow: p === page
? `2px 2px 0px ${t.borderColor}`
: `1px 1px 0px ${t.borderColor}`,
margin: `0 2px`,
transition: t.transitionDuration,
}, onMouseOver: (e) => {
if (p !== page)
e.currentTarget.style.background =
t.hoverColor;
}, onMouseOut: (e) => {
if (p !== page)
e.currentTarget.style.background =
t.primaryColor;
}, children: p }, p))), _jsx("button", { onClick: () => onPageChange(Math.min(pageCount, page + 1)), disabled: page === pageCount, style: {
background: t.primaryColor,
color: t.textColor,
border: `${t.borderWidth} ${t.borderStyle} ${t.borderColor}`,
borderRadius: t.cornerRadius,
padding: `4px 12px`,
fontWeight: t.fontWeight,
fontFamily: t.fontFamily,
fontSize: t.fontSize,
cursor: page === pageCount ? "not-allowed" : "pointer",
opacity: page === pageCount ? 0.5 : 1,
boxShadow: `1px 1px 0px ${t.borderColor}`,
transition: t.transitionDuration,
}, children: "Next" })] }));
};
export default Pagination;