Add pagination

src/components/Pagination/Pagination.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import classNames from 'classnames/bind';
+import { Link } from 'gatsby';
+import { PAGINATION } from '../../constants';
+import styles from './Pagination.module.scss';
+
+const cx = classNames.bind(styles);
+
+const Pagination = ({
+  prevPagePath,
+  nextPagePath,
+  hasNextPage,
+  hasPrevPage
+}) => {
+  const prevClassName = cx({
+    'pagination__prev-link': true,
+    'pagination__prev-link--disable': !hasPrevPage
+  });
+
+  const nextClassName = cx({
+    'pagination__next-link': true,
+    'pagination__next-link--disable': !hasNextPage
+  });
+
+  return (
+    <div className={styles['pagination']}>
+      <div className={styles['pagination__prev']}>
+        <Link rel="prev" to={prevPagePath} className={prevClassName}>{PAGINATION.PREV_PAGE}</Link>
+      </div>
+      <div className={styles['pagination__next']}>
+        <Link rel="next" to={nextPagePath} className={nextClassName}>{PAGINATION.NEXT_PAGE}</Link>
+      </div>
+    </div>
+  )
+};
+
+export default Pagination;

src/components/Pagination/Pagination.module.scss

@@ -0,0 +1,54 @@
+@import '../../assets/scss/variables';
+@import '../../assets/scss/mixins';
+
+.pagination {
+  @include margin-top(2);
+  display: flex;
+
+  &__prev {
+    width: 50%;
+    text-align: left;
+
+    &-link {
+      color: $color-secondary;
+      font-size: 26px;
+      font-weight: bold;
+
+      &:hover,
+      &:focus {
+        color: $color-primary;
+      }
+
+      &--disable {
+        pointer-events: none;
+        color: lighten($color-gray, 20%);
+      }
+
+    }
+
+  }
+
+  &__next {
+    width: 50%;
+    text-align: right;
+
+    &-link {
+      color: $color-secondary;
+      font-size: 26px;
+      font-weight: bold;
+
+      &:hover,
+      &:focus {
+        color: $color-primary;
+      }
+
+      &--disable {
+        pointer-events: none;
+        color: lighten($color-gray, 20%);
+      }
+
+    }
+
+  }
+
+}

src/components/Pagination/Pagination.test.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Pagination from './Pagination';
+
+describe('Pagination', () => {
+  const props = {
+    prevPagePath: '/page/1',
+    nextPagePath: '/page/3',
+    hasNextPage: true,
+    hasPrevPage: true
+  };
+
+  it('renders correctly', () => {
+    const tree = renderer.create(<Pagination {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Pagination/__snapshots__/Pagination.test.js.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Pagination renders correctly 1`] = `
+<div
+  className="pagination"
+>
+  <div
+    className="pagination__prev"
+  >
+    <Link
+      className="pagination__prev-link"
+      to="/page/1"
+    >
+      ← PREV
+    </Link>
+  </div>
+  <div
+    className="pagination__next"
+  >
+    <Link
+      className="pagination__next-link"
+      to="/page/3"
+    >
+      → NEXT
+    </Link>
+  </div>
+</div>
+`;

src/components/Pagination/index.js

@@ -0,0 +1 @@
+export { default } from './Pagination';