Add custom pages content

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;
+}

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 }}
+    />
+  )
+}

components/custom-pages/PageContent/index.ts

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

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