feat: use PageLayout for OverviewTemplate

newrelic · Jul 30, 2020 · 9e0c007 · 9e0c007
1 parent 0643661
commit 9e0c007
Showing 1 changed file with 35 additions and 29 deletions.
diff --git 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>
     </>
   );
 };