pagination component

src/components/molecules/Pagination.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Link } from 'gatsby'
+import styles from './Pagination.module.scss'
+
+const Pagination = ({ pageContext }) => {
+  const { previousPagePath, nextPagePath } = pageContext
+
+  return (
+    <div className={styles.pagination}>
+      {previousPagePath ? (
+        <Link className={styles.paginationLink} to={previousPagePath}>
+          &laquo; Newer Posts
+        </Link>
+      ) : null}
+      {nextPagePath ? (
+        <Link className={styles.paginationLink} to={nextPagePath}>
+          Older Posts &raquo;
+        </Link>
+      ) : null}
+    </div>
+  )
+}
+
+Pagination.propTypes = {
+  pageContext: PropTypes.object.isRequired
+}
+
+export default Pagination

src/components/molecules/Pagination.module.scss

@@ -0,0 +1,16 @@
+@import 'variables';
+
+.pagination {
+    display: flex;
+    margin-top: $spacer * 2;
+    margin-bottom: $spacer * 2;
+}
+
+.paginationLink {
+    flex: 1 1 50%;
+    display: block;
+
+    &:last-child {
+        text-align: right;
+    }
+}

src/templates/Posts.jsx

@@ -8,12 +8,12 @@ import PostLead from '../components/atoms/PostLead'
 import PostContent from '../components/atoms/PostContent'
 import PostMore from '../components/atoms/PostMore'
 import PostLinkActions from '../components/atoms/PostLinkActions'
+import Pagination from '../components/molecules/Pagination'
 import postStyles from '../templates/Post.module.scss'
 import styles from './Posts.module.scss'
 
 const IndexPage = ({ data, location, pageContext }) => {
   const edges = data.allMarkdownRemark.edges
-  const { previousPagePath, nextPagePath } = pageContext
 
   const Posts = edges.map(({ node }) => {
     const { type, linkurl, title, image } = node.frontmatter
@@ -41,17 +41,16 @@ const IndexPage = ({ data, location, pageContext }) => {
             <PostLinkActions slug={slug} linkurl={linkurl} />
           </Fragment>
         )}
-        <div>
-          {previousPagePath ? (
-            <Link to={previousPagePath}>Previous</Link>
-          ) : null}
-          {nextPagePath ? <Link to={nextPagePath}>Next</Link> : null}
-        </div>
       </article>
     )
   })
 
-  return <Layout location={location}>{Posts}</Layout>
+  return (
+    <Layout location={location}>
+      {Posts}
+      <Pagination pageContext={pageContext} />
+    </Layout>
+  )
 }
 
 IndexPage.propTypes = {