init: push source

src/components/ui/pagination.tsx

@@ -0,0 +1,72 @@
+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>
+  );
+};