83 lines
2.6 KiB
TypeScript
83 lines
2.6 KiB
TypeScript
type PaginationProps = {
|
|
currentPage: number;
|
|
totalPages: number;
|
|
onPageChange: (page: number) => void;
|
|
};
|
|
|
|
const Pagination: React.FC<PaginationProps> = ({
|
|
currentPage,
|
|
totalPages,
|
|
onPageChange,
|
|
}) => {
|
|
const getPaginationItems = () => {
|
|
const delta = 1;
|
|
const range = [];
|
|
for (let i = 1; i <= totalPages; i++) {
|
|
if (i === 1 || i === totalPages || (i >= currentPage - delta && i <= currentPage + delta)) {
|
|
range.push(i);
|
|
}
|
|
}
|
|
|
|
const rangeWithDots: (number | string)[] = [];
|
|
let l: number | undefined;
|
|
for (const i of range) {
|
|
if (l !== undefined) {
|
|
if (i - l === 2) {
|
|
rangeWithDots.push(l + 1);
|
|
} else if (i - l > 2) {
|
|
rangeWithDots.push('...');
|
|
}
|
|
}
|
|
rangeWithDots.push(i);
|
|
l = i;
|
|
}
|
|
|
|
return rangeWithDots;
|
|
};
|
|
|
|
const pages = getPaginationItems();
|
|
|
|
return (
|
|
<div className="flex items-center ">
|
|
<button
|
|
onClick={() => onPageChange(currentPage - 1)}
|
|
disabled={currentPage === 1}
|
|
className="mr-2.5 flex items-center h-10 justify-center rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-gray-700 shadow-theme-xs hover:bg-gray-50 disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] text-sm"
|
|
>
|
|
Previous
|
|
</button>
|
|
<div className="flex items-center gap-2">
|
|
{pages.map((page, index) =>
|
|
page === '...' ? (
|
|
<span key={`dots-${index}`} className="flex h-10 w-10 items-center justify-center text-gray-500">
|
|
...
|
|
</span>
|
|
) : (
|
|
<button
|
|
key={page}
|
|
onClick={() => onPageChange(page as number)}
|
|
className={`flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium hover:bg-blue-500/[0.08] hover:text-brand-500 dark:hover:text-brand-500 ${
|
|
currentPage === page
|
|
? "bg-brand-500 text-white"
|
|
: "text-gray-700 dark:text-gray-400"
|
|
}`}
|
|
>
|
|
{page}
|
|
</button>
|
|
),
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => onPageChange(currentPage + 1)}
|
|
disabled={currentPage === totalPages}
|
|
className="ml-2.5 flex items-center justify-center rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-gray-700 shadow-theme-xs text-sm hover:bg-gray-50 h-10 disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]"
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Pagination;
|