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>
+    )
+  }
+)

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>
-    )
-  }
-)