Create pagination component and add it to BootcampsPage

AkankshShigwan · Oct 7, 2024 · 97899e2 · 97899e2
1 parent e9d10ba
commit 97899e2
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 29 deletions.
diff --git a/ui/src/components/Pagination.jsx b/ui/src/components/Pagination.jsx
@@ -0,0 +1,35 @@
+const Pagination = () => {
+  return (
+    <nav aria-label="Page navigation example">
+      <ul className="pagination">
+        <li className="page-item">
+          <a className="page-link" href="/">
+            Previous
+          </a>
+        </li>
+        <li className="page-item">
+          <a className="page-link" href="/">
+            1
+          </a>
+        </li>
+        <li className="page-item">
+          <a className="page-link" href="/">
+            2
+          </a>
+        </li>
+        <li className="page-item">
+          <a className="page-link" href="/">
+            3
+          </a>
+        </li>
+        <li className="page-item">
+          <a className="page-link" href="/">
+            Next
+          </a>
+        </li>
+      </ul>
+    </nav>
+  );
+};
+
+export default Pagination;
diff --git a/ui/src/pages/bootcamps/BootcampsPage.jsx b/ui/src/pages/bootcamps/BootcampsPage.jsx
@@ -1,4 +1,5 @@
 import Bootcamp from '../../components/Bootcamp';
+import Pagination from '../../components/Pagination';
 
 const bootcamps = [
   {
@@ -104,35 +105,7 @@ const BootcampsPage = () => {
             ))}
 
             {/* <!-- Pagination --> */}
-            <nav aria-label="Page navigation example">
-              <ul className="pagination">
-                <li className="page-item">
-                  <a className="page-link" href="/">
-                    Previous
-                  </a>
-                </li>
-                <li className="page-item">
-                  <a className="page-link" href="/">
-                    1
-                  </a>
-                </li>
-                <li className="page-item">
-                  <a className="page-link" href="/">
-                    2
-                  </a>
-                </li>
-                <li className="page-item">
-                  <a className="page-link" href="/">
-                    3
-                  </a>
-                </li>
-                <li className="page-item">
-                  <a className="page-link" href="/">
-                    Next
-                  </a>
-                </li>
-              </ul>
-            </nav>
+            <Pagination />
           </div>
         </div>
       </div>