feat: introduce header file

BREAKING CHANGE: intro split into header and intro component. GridTemplateArea is now called header instead of intro.
Pyrax · Aug 10, 2020 · 8ab0ec0 · 8ab0ec0
1 parent 2dd321c
commit 8ab0ec0
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 5 deletions.
diff --git a/.github/static/images/theme-preview.png b/.github/static/images/theme-preview.png
diff --git a/gatsby-theme-contact/src/components/contact-page.js b/gatsby-theme-contact/src/components/contact-page.js
@@ -3,6 +3,7 @@ import React from 'react'
 import { jsx } from 'theme-ui'
 
 import Layout from './layout'
+import Header from './header'
 import Intro from './intro'
 import Form from './form'
 import Details from './details'
@@ -18,22 +19,23 @@ const ContactPage = () => (
         gridTemplateRows: [`auto`],
         gridTemplateAreas: [
           `
-        "intro"
+        "header"
         "form"
         "details"
         `,
           null,
           `
-        "intro intro"
+        "header header"
         "form details"
         `
         ]
       }}
     >
-      <div sx={{ gridArea: `intro`, mb: [1, null, 3] }}>
-        <Intro />
+      <div sx={{ gridArea: `header`, mb: [1, null, 3] }}>
+        <Header />
       </div>
       <div sx={{ gridArea: `form`, pr: [0, null, 5] }}>
+        <Intro />
         <Form />
       </div>
       <aside

diff --git a/gatsby-theme-contact/src/components/header.js b/gatsby-theme-contact/src/components/header.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import { Styled } from 'theme-ui'
+
+const Header = () => (
+  <>
+    <Styled.h2>Get in touch</Styled.h2>
+  </>
+)
+
+export default Header
diff --git a/gatsby-theme-contact/src/components/intro.js b/gatsby-theme-contact/src/components/intro.js
@@ -3,7 +3,6 @@ import { Styled } from 'theme-ui'
 
 const Intro = () => (
   <>
-    <Styled.h2>Get in touch</Styled.h2>
     <Styled.p>
       If you want to get in touch for your next project or you still have
       questions left, do not hesitate to start a chat.