pagination

src/components/Pagination.tsx

@@ -14,31 +14,36 @@ const Pagination: React.FC<PaginationProps> = ({
 }) => {
     const getPageNumbers = () => {
         const pageNumbers: (number | string)[] = [];
-        const maxVisiblePages = 5; // تعداد حداکثری صفحات قابل مشاهده
 
-        if (totalPages <= maxVisiblePages) {
+        if (totalPages <= 7) {
+            // Show all pages if total pages are 7 or less
             for (let i = 1; i <= totalPages; i++) {
                 pageNumbers.push(i);
             }
         } else {
-            if (currentPage > 3) {
+            // Always show first page
-                pageNumbers.push(1);
+            pageNumbers.push(1);
-                if (currentPage > 4) {
+
-                    pageNumbers.push("...");
+            if (currentPage <= 4) {
+                // Near the beginning
+                for (let i = 2; i <= 5; i++) {
+                    pageNumbers.push(i);
                 }
-            }
+                pageNumbers.push("...");
-
+                pageNumbers.push(totalPages);
-            const start = Math.max(2, currentPage - 1);
+            } else if (currentPage >= totalPages - 3) {
-            const end = Math.min(totalPages - 1, currentPage + 1);
+                // Near the end
-
+                pageNumbers.push("...");
-            for (let i = start; i <= end; i++) {
+                for (let i = totalPages - 4; i <= totalPages; i++) {
-                pageNumbers.push(i);
+                    pageNumbers.push(i);
-            }
-
-            if (currentPage < totalPages - 2) {
-                if (currentPage < totalPages - 3) {
-                    pageNumbers.push("...");
                 }
+            } else {
+                // In the middle
+                pageNumbers.push("...");
+                pageNumbers.push(currentPage - 1);
+                pageNumbers.push(currentPage);
+                pageNumbers.push(currentPage + 1);
+                pageNumbers.push("...");
                 pageNumbers.push(totalPages);
             }
         }
@@ -48,51 +53,61 @@ const Pagination: React.FC<PaginationProps> = ({
 
     const pageNumbers = getPageNumbers();
 
-    return (
+    const handlePageChange = (page: number) => {
-        <div className="flex gap-2 text-xs justify-center items-center space-x-2 mt-4">
+        if (page >= 1 && page <= totalPages) {
-            {/* دکمه قبلی */}
+            onPageChange(page);
-            {/* <button
+        }
-                className={`px-3 py-1 rounded-md ${currentPage === 1
+    };
-                        ? "text-gray-400 cursor-not-allowed"
-                        : "text-blue-600 hover:bg-gray-100"
-                    }`}
-                onClick={() => currentPage > 1 && onPageChange(currentPage - 1)}
-                disabled={currentPage === 1}
-            >
-                قبلی
-            </button> */}
 
-            {/* شماره صفحات */}
+    return (
+        <div className="flex gap-2 text-xs justify-center items-center mt-4">
+            {/* Previous button */}
+            <button
+                className={`size-8 rounded-md flex items-center justify-center ${currentPage === 1
+                    ? "text-gray-400 cursor-not-allowed bg-gray-100"
+                    : "text-primary bg-[#EAECF5] hover:bg-gray-200"
+                    }`}
+                onClick={() => handlePageChange(currentPage - 1)}
+                disabled={currentPage === 1}
+                aria-label="Previous page"
+            >
+                &lt;
+            </button>
+
+            {/* Page numbers */}
             {pageNumbers.map((page, index) =>
                 typeof page === "number" ? (
                     <button
                         key={index}
                         className={`size-8 rounded-md ${currentPage === page
                             ? "bg-primary text-white"
-                            : "text-primary bg-[#EAECF5] hover:bg-gray-100"
+                            : "text-primary bg-[#EAECF5] hover:bg-gray-200"
                             }`}
-                        onClick={() => onPageChange(page)}
+                        onClick={() => handlePageChange(page)}
+                        aria-label={`Page ${page}`}
+                        aria-current={currentPage === page ? "page" : undefined}
                     >
                         {page}
                     </button>
                 ) : (
-                    <span key={index} className="px-3 py-1 text-gray-500">
+                    <span key={index} className="size-8 flex items-center justify-center text-gray-500">
                         {page}
                     </span>
                 )
             )}
 
-            {/* دکمه بعدی */}
+            {/* Next button */}
-            {/* <button
+            <button
-                className={`px-3 py-1 rounded-md ${currentPage === totalPages
+                className={`size-8 rounded-md flex items-center justify-center ${currentPage === totalPages
-                        ? "text-gray-400 cursor-not-allowed"
+                    ? "text-gray-400 cursor-not-allowed bg-gray-100"
-                        : "text-blue-600 hover:bg-gray-100"
+                    : "text-primary bg-[#EAECF5] hover:bg-gray-200"
                     }`}
-                onClick={() => currentPage < totalPages && onPageChange(currentPage + 1)}
+                onClick={() => handlePageChange(currentPage + 1)}
                 disabled={currentPage === totalPages}
+                aria-label="Next page"
             >
-                بعدی
+                &gt;
-            </button> */}
+            </button>
         </div>
     );
 };