diff --git a/using-pagination/src/pages/index.js b/using-pagination/src/pages/index.js
index 2a18183a..27cde70a 100644
--- a/using-pagination/src/pages/index.js
+++ b/using-pagination/src/pages/index.js
@@ -1,13 +1,39 @@
+import Link from 'next/link';
import { gql } from 'graphql-request';
import { graphcms } from '../../lib/_graphcms';
const limit = 1;
+const singleProductStyle = {
+ display: 'flex',
+ flexDirection: 'column',
+ width: '200px',
+ margin: '10px',
+};
+
+function SingleProduct({product, index}) {
+ return (
+
+ )
+}
+
+const productListStyle = {
+ display: 'flex'
+};
+
function IndexPage({ products }) {
- return products.map(({ node: product }) => (
- {JSON.stringify(product, 2, null)}
- ));
+ return (
+
+ {products.map(({ node: product }, index) => {
+ return
+ })}
+
+ );
}
export async function getStaticProps() {
diff --git a/using-pagination/src/pages/products/[page].js b/using-pagination/src/pages/products/[page].js
index d02643e8..fe58a4f6 100644
--- a/using-pagination/src/pages/products/[page].js
+++ b/using-pagination/src/pages/products/[page].js
@@ -5,6 +5,31 @@ import { graphcms } from '../../../lib/_graphcms';
const limit = 1;
+const singleProductStyle = {
+ display: 'flex',
+ flexDirection: 'column',
+ width: '200px',
+ margin: '10px',
+ color: '#000',
+};
+
+function SingleProduct({product}) {
+ return (
+
+
{product.name}
+
+ )
+}
+
+const navStyle = {
+ display: 'inline-block',
+ backgroundColor: '#ccc',
+ color: '#111',
+ textDecoration: 'none',
+ padding: '2px 6px',
+ marginRight: '5px',
+}
+
function ProductPage({
currentPageNumber,
hasNextPage,
@@ -13,15 +38,19 @@ function ProductPage({
}) {
return (
- {JSON.stringify(products, 2, null)}
+
+ Home
+
+ Page {currentPageNumber}
+
{hasPreviousPage ? (
- Previous page
+ Previous page
) : null}
{hasNextPage ? (
- Next page
+ Next page
) : null}