From 214cb49fb408181e2b37feaed013cc1fe6a9a624 Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Thu, 15 Oct 2020 18:42:03 -0500
Subject: [PATCH] Add custom pages content

---
 .../PageContent/PageContent.module.css         | 18 ++++++++++++++++++
 .../custom-pages/PageContent/PageContent.tsx   | 16 ++++++++++++++++
 components/custom-pages/PageContent/index.ts   |  1 +
 pages/[...pages].tsx                           |  8 ++++++--
 4 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 components/custom-pages/PageContent/PageContent.module.css
 create mode 100644 components/custom-pages/PageContent/PageContent.tsx
 create mode 100644 components/custom-pages/PageContent/index.ts

diff --git a/components/custom-pages/PageContent/PageContent.module.css b/components/custom-pages/PageContent/PageContent.module.css
new file mode 100644
index 000000000..191da17f5
--- /dev/null
+++ b/components/custom-pages/PageContent/PageContent.module.css
@@ -0,0 +1,18 @@
+.root h1 {
+  @apply text-5xl mb-12;
+}
+
+.root h2 {
+  @apply text-3xl mt-12 mb-4 leading-snug;
+}
+
+.root h3 {
+  @apply text-2xl mt-8 mb-4 leading-snug;
+}
+
+.root p,
+.root ul,
+.root ol,
+.root blockquote {
+  @apply my-6;
+}
diff --git a/components/custom-pages/PageContent/PageContent.tsx b/components/custom-pages/PageContent/PageContent.tsx
new file mode 100644
index 000000000..7237b9fa8
--- /dev/null
+++ b/components/custom-pages/PageContent/PageContent.tsx
@@ -0,0 +1,16 @@
+import cn from 'classnames'
+import s from './PageContent.module.css'
+
+type Props = {
+  className?: 'string'
+  html: string
+}
+
+export default function PageContent({ className, html }: Props) {
+  return (
+    <div
+      className={cn(s.root, className)}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  )
+}
diff --git a/components/custom-pages/PageContent/index.ts b/components/custom-pages/PageContent/index.ts
new file mode 100644
index 000000000..f3fe82eb1
--- /dev/null
+++ b/components/custom-pages/PageContent/index.ts
@@ -0,0 +1 @@
+export { default } from './PageContent'
diff --git a/pages/[...pages].tsx b/pages/[...pages].tsx
index 46c241242..97dfbda71 100644
--- a/pages/[...pages].tsx
+++ b/pages/[...pages].tsx
@@ -3,6 +3,7 @@ import { Layout } from '@components/core'
 import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
 import getPage from '@lib/bigcommerce/api/operations/get-page'
 import getSlug from '@utils/get-slug'
+import PageContent from '@components/custom-pages/PageContent'
 
 export async function getStaticProps({
   preview,
@@ -37,8 +38,11 @@ export async function getStaticPaths() {
 export default function Pages({
   page,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
-  console.log('PAGE', page)
-  return <div className="mt-3">Hello!</div>
+  return (
+    <div className="max-w-2xl mx-auto py-20">
+      <PageContent html={page.body} />
+    </div>
+  )
 }
 
 Pages.Layout = Layout