style pagination controls

gatsby-node.js

@@ -28,7 +28,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   }
 
   const posts = result.data.allMdx.edges;
-  const postsPerPage = 2;
+  const postsPerPage = 10;
   const numPages = Math.ceil(posts.length / postsPerPage);
   const rootPath = "/notes";
 

src/templates/notes.module.css

@@ -2,3 +2,11 @@
   display: flex;
   justify-content: space-between;
 }
+
+.prev-page-link {
+  margin-right: 10px;
+}
+
+.next-page-link {
+  margin-left: 10px;
+}

src/templates/notes.tsx

@@ -6,12 +6,12 @@ import style from "./notes.module.css";
 export default ({ data, pageContext }) => {
   const posts = data.allMdx.edges;
   const { currentPage, numPages, rootPath } = pageContext;
-  let backElement = null;
+  let prevPageLink = null;
 
   if (currentPage === 2) {
-    backElement = <a href={rootPath}>&lt;&lt;</a>;
+    prevPageLink = <a href={rootPath} className={style.prevPageLink}>&lt;&lt;</a>;
   } else if (currentPage !== 1) {
-    backElement = <a href={rootPath + '/' + (currentPage - 1)}>&lt;&lt;</a>;
+    prevPageLink = <a href={rootPath + '/' + (currentPage - 1)} className={style.prevPageLink}>&lt;&lt;</a>;
   }
 
   return (
@@ -31,11 +31,11 @@ export default ({ data, pageContext }) => {
           </article>
         )
       })}
-      <div>
-        {backElement}
-        <p>{currentPage}</p>
-        {currentPage !== numPages ? <a href={rootPath + '/' + (currentPage + 1)}>&gt;&gt;</a> : ''}
-      </div>
+      <p className={style.paginationNav}>
+        {prevPageLink}
+        {currentPage}
+        {currentPage !== numPages && <a href={rootPath + '/' + (currentPage + 1)} className={style.nextPageLink}>&gt;&gt;</a>}
+      </p>
     </>
   )
 }