72 lines
1.6 KiB
TypeScript
72 lines
1.6 KiB
TypeScript
import * as React from "react";
|
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface PaginationProps {
|
|
/**
|
|
* Current page number (1-indexed)
|
|
*/
|
|
currentPage: number;
|
|
/**
|
|
* Total number of pages
|
|
*/
|
|
totalPages: number;
|
|
/**
|
|
* Callback when page changes
|
|
*/
|
|
onPageChange: (page: number) => void;
|
|
/**
|
|
* Optional className for styling
|
|
*/
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* Pagination component for navigating through paginated content
|
|
*
|
|
* @example
|
|
* <Pagination
|
|
* currentPage={1}
|
|
* totalPages={5}
|
|
* onPageChange={(page) => setCurrentPage(page)}
|
|
* />
|
|
*/
|
|
export const Pagination: React.FC<PaginationProps> = ({
|
|
currentPage,
|
|
totalPages,
|
|
onPageChange,
|
|
className,
|
|
}) => {
|
|
if (totalPages <= 1) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className={cn("flex items-center justify-center space-x-2", className)}>
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={() => onPageChange(currentPage - 1)}
|
|
disabled={currentPage <= 1}
|
|
className="h-8 w-8"
|
|
>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
</Button>
|
|
|
|
<span className="text-sm text-muted-foreground">
|
|
Page {currentPage} of {totalPages}
|
|
</span>
|
|
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={() => onPageChange(currentPage + 1)}
|
|
disabled={currentPage >= totalPages}
|
|
className="h-8 w-8"
|
|
>
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
);
|
|
};
|