feat(pagination): add pagination PageNumber and InfiniteScroll components

src/components/InfiniteScroll.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useRef } from "react";
+
+interface InfiniteScrollProps {
+  children: React.ReactNode;
+  onLoadMore: () => void;
+  hasMore: boolean;
+  isLoading: boolean;
+  className?: string;
+  loader?: React.ReactNode;
+}
+
+export const InfiniteScroll: React.FC<InfiniteScrollProps> = ({
+  children,
+  onLoadMore,
+  hasMore,
+  isLoading,
+  className = "",
+  loader,
+}) => {
+  const observerTarget = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasMore && !isLoading) {
+          onLoadMore();
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    if (observerTarget.current) {
+      observer.observe(observerTarget.current);
+    }
+
+    return () => observer.disconnect();
+  }, [hasMore, isLoading, onLoadMore]);
+
+  return (
+    <div className={className}>
+      {children}
+      {hasMore && <div ref={observerTarget} className="h-2 w-full" />}
+      {isLoading && (
+        loader || (
+          <div className="py-2 text-center text-xs text-slate-500 dark:text-slate-400">
+            Loading...
+          </div>
+        )
+      )}
+    </div>
+  );
+};