From 9730fec14f8e7974cfa61bd9c843e0ecada6aab2 Mon Sep 17 00:00:00 2001
From: daniyal <daniyal@nostrdev.com>
Date: Wed, 18 Sep 2024 08:18:03 +0500
Subject: [PATCH] chore: move  pagination for separate component file

---
 src/components/Pagination.tsx | 40 +++++++++++++++++++++++++++++++++++
 src/pages/mods.tsx            | 40 +----------------------------------
 2 files changed, 41 insertions(+), 39 deletions(-)
 create mode 100644 src/components/Pagination.tsx

diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
new file mode 100644
index 0000000..5e6e878
--- /dev/null
+++ b/src/components/Pagination.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+
+type PaginationProps = {
+  page: number
+  disabledNext: boolean
+  handlePrev: () => void
+  handleNext: () => void
+}
+
+export const Pagination = React.memo(
+  ({ page, disabledNext, handlePrev, handleNext }: PaginationProps) => {
+    return (
+      <div className='IBMSecMain'>
+        <div className='PaginationMain'>
+          <div className='PaginationMainInside'>
+            <button
+              className='PaginationMainInsideBox PaginationMainInsideBoxArrows'
+              onClick={handlePrev}
+              disabled={page === 1}
+            >
+              <i className='fas fa-chevron-left'></i>
+            </button>
+            <div className='PaginationMainInsideBoxGroup'>
+              <button className='PaginationMainInsideBox PMIBActive'>
+                <p>{page}</p>
+              </button>
+            </div>
+            <button
+              className='PaginationMainInsideBox PaginationMainInsideBoxArrows'
+              onClick={handleNext}
+              disabled={disabledNext}
+            >
+              <i className='fas fa-chevron-right'></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
diff --git a/src/pages/mods.tsx b/src/pages/mods.tsx
index 55c609b..e6a5326 100644
--- a/src/pages/mods.tsx
+++ b/src/pages/mods.tsx
@@ -19,6 +19,7 @@ import '../styles/styles.css'
 import { ModDetails, MuteLists } from '../types'
 import { fetchMods } from '../utils'
 import { MOD_FILTER_LIMIT } from '../constants'
+import { Pagination } from 'components/Pagination'
 
 enum SortBy {
   Latest = 'Latest',
@@ -421,42 +422,3 @@ const Filters = React.memo(
     )
   }
 )
-
-type PaginationProps = {
-  page: number
-  disabledNext: boolean
-  handlePrev: () => void
-  handleNext: () => void
-}
-
-const Pagination = React.memo(
-  ({ page, disabledNext, handlePrev, handleNext }: PaginationProps) => {
-    return (
-      <div className='IBMSecMain'>
-        <div className='PaginationMain'>
-          <div className='PaginationMainInside'>
-            <button
-              className='PaginationMainInsideBox PaginationMainInsideBoxArrows'
-              onClick={handlePrev}
-              disabled={page === 1}
-            >
-              <i className='fas fa-chevron-left'></i>
-            </button>
-            <div className='PaginationMainInsideBoxGroup'>
-              <button className='PaginationMainInsideBox PMIBActive'>
-                <p>{page}</p>
-              </button>
-            </div>
-            <button
-              className='PaginationMainInsideBox PaginationMainInsideBoxArrows'
-              onClick={handleNext}
-              disabled={disabledNext}
-            >
-              <i className='fas fa-chevron-right'></i>
-            </button>
-          </div>
-        </div>
-      </div>
-    )
-  }
-)