65 lines
1.4 KiB
TypeScript
65 lines
1.4 KiB
TypeScript
import { ArrowLeft, ArrowRight } from "lucide-react";
|
|
import React, { useCallback } from "react";
|
|
import { Button } from "./button";
|
|
|
|
type PaginationProps = {
|
|
currentPage: number;
|
|
totalPages: number;
|
|
onPageChange: (page: number) => void;
|
|
};
|
|
|
|
const Pagination: React.FC<PaginationProps> = ({
|
|
currentPage,
|
|
totalPages,
|
|
onPageChange,
|
|
}) => {
|
|
const getPageNumbers = useCallback(() => {
|
|
const delta = 2;
|
|
const pages = [];
|
|
|
|
for (
|
|
let i = Math.max(1, currentPage - delta);
|
|
i <= Math.min(totalPages, currentPage + delta);
|
|
i++
|
|
) {
|
|
pages.push(i);
|
|
}
|
|
|
|
return pages;
|
|
}, [currentPage, totalPages]);
|
|
|
|
if (totalPages <= 1) return null;
|
|
|
|
return (
|
|
<nav className="flex justify-center items-center gap-2 mt-4">
|
|
<Button
|
|
onClick={() => onPageChange(currentPage - 1)}
|
|
disabled={currentPage === 1}
|
|
variant="outlined"
|
|
>
|
|
<ArrowLeft size={17} />
|
|
</Button>
|
|
|
|
{getPageNumbers().map((page) => (
|
|
<Button
|
|
key={page}
|
|
onClick={() => onPageChange(page)}
|
|
variant={page === currentPage ? "contained" : "outlined"}
|
|
>
|
|
<p className="text-sm">{page}</p>
|
|
</Button>
|
|
))}
|
|
|
|
<Button
|
|
onClick={() => onPageChange(currentPage + 1)}
|
|
disabled={currentPage === totalPages}
|
|
variant="outlined"
|
|
>
|
|
<ArrowRight size={17} />
|
|
</Button>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default Pagination;
|