From f7e8b042ec26d733e6436c0ab5072624f4aaacd8 Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Mon, 14 Oct 2024 15:10:22 +0330
Subject: [PATCH] pagination got responsive

---
 .../blog/components/pagination/pagination.tsx | 92 ++++++++++---------
 1 file changed, 48 insertions(+), 44 deletions(-)

diff --git a/src/app/(routes)/blog/components/pagination/pagination.tsx b/src/app/(routes)/blog/components/pagination/pagination.tsx
index 163cc92..c840e9f 100644
--- a/src/app/(routes)/blog/components/pagination/pagination.tsx
+++ b/src/app/(routes)/blog/components/pagination/pagination.tsx
@@ -86,53 +86,57 @@ const Pagination: React.FC<PaginationProps> = ({ meta }) => {
   };
 
   return (
-    <div className="mt-4 flex items-center justify-center gap-2">
-      {/* First Page */}
-      {current_page > 1 && (
-        <Link
-          href={generatePageLink(1)}
-          className="rounded-full border bg-[#EAEAEA] px-3 py-1 text-blog-text-default hover:bg-[#d6d6d6]"
-          aria-label="First Page"
-        >
-          First
-        </Link>
-      )}
-
-      {/* Previous Page */}
-      {current_page > 1 && (
-        <Link
-          href={generatePageLink(current_page - 1)}
-          className="rounded-full border bg-[#EAEAEA] px-4 py-0 text-[24px] text-blog-text-default hover:bg-[#d6d6d6]"
-          aria-label="Previous Page"
-        >
-          {"<"}
-        </Link>
-      )}
-
+    <div className="mt-4 flex flex-wrap items-center justify-center gap-2">
       {/* Page Numbers */}
-      {renderPageNumbers()}
+      <div className="flex gap-2">{renderPageNumbers()}</div>
 
-      {/* Next Page */}
-      {current_page < last_page && (
-        <Link
-          href={generatePageLink(current_page + 1)}
-          className="rounded-full border bg-[#EAEAEA] px-4 py-0 text-[24px] text-blog-text-default hover:bg-[#d6d6d6]"
-          aria-label="Next Page"
-        >
-          {">"}
-        </Link>
-      )}
+      <div className="flex gap-2">
+        {/* First Page */}
+        {current_page > 1 && (
+          <Link
+            href={generatePageLink(1)}
+            className="rounded-full border bg-[#EAEAEA] px-3 py-1 text-blog-text-default hover:bg-[#d6d6d6]"
+            aria-label="First Page"
+          >
+            First
+          </Link>
+        )}
 
-      {/* Last Page */}
-      {current_page < last_page && (
-        <Link
-          href={generatePageLink(last_page)}
-          className="rounded-full border bg-[#EAEAEA] px-3 py-1 text-blog-text-default hover:bg-[#d6d6d6]"
-          aria-label="Last Page"
-        >
-          Last
-        </Link>
-      )}
+        {/* Previous Page */}
+        {current_page > 1 && (
+          <Link
+            href={generatePageLink(current_page - 1)}
+            className="rounded-full border bg-[#EAEAEA] px-4 py-0 text-[24px] text-blog-text-default hover:bg-[#d6d6d6]"
+            aria-label="Previous Page"
+          >
+            {"<"}
+          </Link>
+        )}
+      </div>
+
+      <div className="flex gap-2">
+        {/* Next Page */}
+        {current_page < last_page && (
+          <Link
+            href={generatePageLink(current_page + 1)}
+            className="rounded-full border bg-[#EAEAEA] px-4 py-0 text-[24px] text-blog-text-default hover:bg-[#d6d6d6]"
+            aria-label="Next Page"
+          >
+            {">"}
+          </Link>
+        )}
+
+        {/* Last Page */}
+        {current_page < last_page && (
+          <Link
+            href={generatePageLink(last_page)}
+            className="rounded-full border bg-[#EAEAEA] px-3 py-1 text-blog-text-default hover:bg-[#d6d6d6]"
+            aria-label="Last Page"
+          >
+            Last
+          </Link>
+        )}
+      </div>
     </div>
   );
 };