Center Pagination Component

kkamara · Oct 22, 2024 · e233886 · e233886
1 parent 28be6d2
commit e233886
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 20 deletions.
diff --git a/resources/js/components/pages/HomeComponent.jsx b/resources/js/components/pages/HomeComponent.jsx
@@ -32,26 +32,28 @@ export default function HomeComponent() {
         return null
     }
 
-    return <ReactPaginate
-      onPageChange={handlePageChange}
-      previousLabel="Previous"
-      nextLabel="Next"
-      pageClassName="page-item"
-      pageLinkClassName="page-link"
-      previousClassName="page-item"
-      previousLinkClassName="page-link"
-      nextClassName="page-item"
-      nextLinkClassName="page-link"
-      breakLabel="..."
-      breakClassName="page-item"
-      breakLinkClassName="page-link"
-      pageCount={state.home.data.meta.last_page}
-      marginPagesDisplayed={2}
-      pageRangeDisplayed={5}
-      containerClassName="pagination"
-      activeClassName="active"
-      forcePage={state.home.data.meta.current_page - 1}
-    />
+    return <div className="book-pagination">
+      <ReactPaginate
+        onPageChange={handlePageChange}
+        previousLabel="Previous"
+        nextLabel="Next"
+        pageClassName="page-item"
+        pageLinkClassName="page-link"
+        previousClassName="page-item"
+        previousLinkClassName="page-link"
+        nextClassName="page-item"
+        nextLinkClassName="page-link"
+        breakLabel="..."
+        breakClassName="page-item"
+        breakLinkClassName="page-link"
+        pageCount={state.home.data.meta.last_page}
+        marginPagesDisplayed={2}
+        pageRangeDisplayed={5}
+        containerClassName="pagination"
+        activeClassName="active"
+        forcePage={state.home.data.meta.current_page - 1}
+      />
+    </div>
   }
 
   const paginationDetail = () => {
@@ -69,6 +71,7 @@ export default function HomeComponent() {
     }
     return (
       <>
+        {paginationDetail()}
         <div className="col-md-12">
           {state.home.data.data.map((book, index) => (
             <div key={index} className="card home-card">

diff --git a/resources/js/components/pages/HomeComponent.scss b/resources/js/components/pages/HomeComponent.scss
@@ -19,4 +19,9 @@
 .book-cost {
     font-size: 18px;
     font-weight: 700;
+}
+
+.book-pagination {
+    display: flex;
+    justify-content: center;
 }