From 9e0c007600f7dabed563fb9b8afb6924f6da5213 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Wed, 29 Jul 2020 18:59:22 -0700
Subject: [PATCH] feat: use PageLayout for OverviewTemplate

---
 src/templates/OverviewTemplate.js | 64 +++++++++++++++++--------------
 1 file changed, 35 insertions(+), 29 deletions(-)

diff --git a/src/templates/OverviewTemplate.js b/src/templates/OverviewTemplate.js
index 598d144fb..862fd81c6 100644
--- a/src/templates/OverviewTemplate.js
+++ b/src/templates/OverviewTemplate.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { graphql, Link } from 'gatsby';
 import PropTypes from 'prop-types';
 
-import PageTitle from '../components/PageTitle';
+import PageLayout from '../components/PageLayout';
 import MDXContainer from '../components/MDXContainer';
 import GuideListing from '../components/GuideListing/GuideListing';
 import GuideTile from '../components/GuideTile/GuideTile';
@@ -18,34 +18,40 @@ const OverviewTemplate = ({ data }) => {
   return (
     <>
       <SEO title={title} description={description} />
-      <PageTitle>{title}</PageTitle>
-      <MDXContainer>{body}</MDXContainer>
-      {!!guides?.nodes.length && (
-        <>
-          <h2
-            className={styles.subtitle}
-          >{`Guides to ${title.toLowerCase()}`}</h2>
-          <GuideListing className={styles.guideListing}>
-            <GuideListing.List>
-              {guides?.nodes.map(({ frontmatter }, index) => (
-                <GuideTile
-                  as={Link}
-                  to={frontmatter.path}
-                  key={index}
-                  duration={frontmatter.duration}
-                  title={frontmatter.tileShorthand?.title || frontmatter.title}
-                  description={
-                    frontmatter.tileShorthand?.description ||
-                    frontmatter.description
-                  }
-                  path={frontmatter.path}
-                  alignment={GuideTile.ALIGNMENT.LEFT}
-                />
-              ))}
-            </GuideListing.List>
-          </GuideListing>
-        </>
-      )}
+      <PageLayout type={PageLayout.TYPE.SINGLE_COLUMN}>
+        <PageLayout.Header title={title} />
+        <PageLayout.Content>
+          <MDXContainer>{body}</MDXContainer>
+          {!!guides?.nodes.length && (
+            <>
+              <h2
+                className={styles.subtitle}
+              >{`Guides to ${title.toLowerCase()}`}</h2>
+              <GuideListing className={styles.guideListing}>
+                <GuideListing.List>
+                  {guides?.nodes.map(({ frontmatter }, index) => (
+                    <GuideTile
+                      as={Link}
+                      to={frontmatter.path}
+                      key={index}
+                      duration={frontmatter.duration}
+                      title={
+                        frontmatter.tileShorthand?.title || frontmatter.title
+                      }
+                      description={
+                        frontmatter.tileShorthand?.description ||
+                        frontmatter.description
+                      }
+                      path={frontmatter.path}
+                      alignment={GuideTile.ALIGNMENT.LEFT}
+                    />
+                  ))}
+                </GuideListing.List>
+              </GuideListing>
+            </>
+          )}
+        </PageLayout.Content>
+      </PageLayout>
     </>
   );
 };