Files
portabase/src/components/wrappers/common/pagination/pagination-navigation.tsx
T

34 lines
1.3 KiB
TypeScript
Raw Normal View History

2025-05-16 15:54:17 +02:00
import { Pagination, PaginationContent, PaginationItem, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
import { PaginationIndexes } from "@/components/wrappers/common/pagination/pagination-indexes";
import { cn } from "@/lib/utils";
2024-11-11 14:56:33 +01:00
export type paginationNavigationProps = {
2025-05-16 15:54:17 +02:00
className?: string;
totalPages: number;
currentPage: number;
goToPage: (page: number) => void;
goToPrevPage: () => void;
goToNextPage: () => void;
maxVisiblePages?: number;
};
2024-11-11 14:56:33 +01:00
export const PaginationNavigation = (props: paginationNavigationProps) => {
2025-05-16 15:54:17 +02:00
const { className, totalPages, currentPage, goToPage, goToPrevPage, goToNextPage, maxVisiblePages = 3 } = props;
2024-11-11 14:56:33 +01:00
2026-02-10 15:52:08 +01:00
if (totalPages <= 1) return null;
2024-11-11 14:56:33 +01:00
return (
2024-11-11 19:12:34 +01:00
<Pagination className={cn("", className)}>
2024-11-11 14:56:33 +01:00
<PaginationContent>
<PaginationItem>
2025-05-16 15:54:17 +02:00
<PaginationPrevious onClick={goToPrevPage} />
2024-11-11 14:56:33 +01:00
</PaginationItem>
2025-05-16 15:54:17 +02:00
<PaginationIndexes totalPages={totalPages} currentPage={currentPage} handlePageChange={goToPage} maxVisiblePages={maxVisiblePages} />
2024-11-11 14:56:33 +01:00
<PaginationItem>
2025-05-16 15:54:17 +02:00
<PaginationNext onClick={goToNextPage} />
2024-11-11 14:56:33 +01:00
</PaginationItem>
</PaginationContent>
</Pagination>
2025-05-16 15:54:17 +02:00
);
};