From a9ebbf6a4a5a6349c3f17fbcb747e85527409222 Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Fri, 13 Mar 2026 10:28:50 +0800
Subject: [PATCH] feat(pagination): add pagination PageNumber and
 InfiniteScroll components

---
 src/components/InfiniteScroll.tsx | 52 ++++++++++++++++++++
 src/components/Pagination.tsx     | 80 +++++++++++++++++++++++++++++++
 2 files changed, 132 insertions(+)
 create mode 100644 src/components/InfiniteScroll.tsx
 create mode 100644 src/components/Pagination.tsx

diff --git a/src/components/InfiniteScroll.tsx b/src/components/InfiniteScroll.tsx
new file mode 100644
index 0000000..08414bc
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
new file mode 100644
index 0000000..1399895
--- /dev/null
+++ b/src/components/Pagination.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { useTranslation } from '../hooks/useTranslation';
+
+interface PaginationProps {
+  currentPage: number;
+  totalCount: number;
+  limit: number;
+  onPageChange: (page: number) => void;
+  onLimitChange: (limit: number) => void;
+  pageSizeOptions?: number[];
+}
+
+export const Pagination: React.FC<PaginationProps> = ({
+  currentPage,
+  totalCount,
+  limit,
+  onPageChange,
+  onLimitChange,
+  pageSizeOptions = [10, 20, 50],
+}) => {
+  const { t, lang } = useTranslation();
+  const isFa = lang === 'fa';
+  
+  const toPersianNum = (num: string | number | undefined | null) => {
+    if (num === null || num === undefined) return num;
+    if (!isFa) return num;
+    return num.toString().replace(/\d/g, d => '۰۱۲۳۴۵۶۷۸۹'[d as any]);
+  };
+
+  const totalPages = Math.ceil(totalCount / limit) || 1;
+
+  if (totalCount === 0) return null;
+
+  const startItem = ((currentPage - 1) * limit) + 1;
+  const endItem = Math.min(currentPage * limit, totalCount);
+
+  return (
+    <div className="mt-auto sticky bottom-0 left-0 right-0 z-10 bg-white/90 dark:bg-slate-950/90 backdrop-blur-md flex items-center justify-between py-4 border-t border-slate-200 dark:border-slate-800 px-4 -mx-4 sm:px-0 sm:mx-0">
+      <div className="flex items-center gap-4">
+        <select
+          value={limit}
+          onChange={(e) => {
+            onLimitChange(Number(e.target.value));
+            onPageChange(1);
+          }}
+          className="p-1.5 border rounded-lg text-sm bg-white dark:bg-slate-900 border-slate-300 dark:border-slate-700 text-slate-700 dark:text-slate-300 outline-none focus:ring-2 focus:ring-blue-500"
+        >
+          {pageSizeOptions.map((option) => (
+            <option key={option} value={option}>
+              {toPersianNum(option)} {t.pagination?.perPage || 'per page'}
+            </option>
+          ))}
+        </select>
+        <span className="text-sm text-slate-500 dark:text-slate-400 hidden sm:inline-block">
+          {t.pagination?.showing || 'Showing'} <strong className="text-slate-700 dark:text-slate-300">{toPersianNum(startItem)}</strong> {t.pagination?.to || '-'} <strong className="text-slate-700 dark:text-slate-300">{toPersianNum(endItem)}</strong> {t.pagination?.of || 'of'} <strong className="text-slate-700 dark:text-slate-300">{toPersianNum(totalCount)}</strong>
+        </span>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <button
+          onClick={() => onPageChange(currentPage - 1)}
+          disabled={currentPage === 1}
+          className="px-4 py-1.5 border rounded-lg text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed border-slate-300 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800"
+        >
+          {t.pagination?.previous || 'Previous'}
+        </button>
+        <span className="text-sm text-slate-600 dark:text-slate-400 font-medium hidden sm:inline-block">
+          {t.pagination?.page || 'Page'} {toPersianNum(currentPage)} {t.pagination?.of || 'of'} {toPersianNum(totalPages)}
+        </span>
+        <button
+          onClick={() => onPageChange(currentPage + 1)}
+          disabled={currentPage >= totalPages}
+          className="px-4 py-1.5 border rounded-lg text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed border-slate-300 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800"
+        >
+          {t.pagination?.next || 'Next'}
+        </button>
+      </div>
+    </div>
+  );
+};