Fix case sensitivity on file names and imports as per this github iss…

…ue: gatsbyjs/gatsby#8205

src/components/PageLayout.js

@@ -0,0 +1,40 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useStaticQuery, graphql } from "gatsby";
+import styled from 'styled-components';
+import Header from './Header';
+
+const MainContentContainer = styled.div`
+  margin: 0 auto;
+  margin-bottom: 3rem;
+  max-width: 960;
+  padding: 0px 1rem 1.5rem;
+  min-height: 75vh;
+`;
+
+const PageLayout = ({ children }) => {
+  const data = useStaticQuery(graphql`
+    query SiteTitleQuery {
+      site {
+        siteMetadata {
+          title
+        }
+      }
+    }
+  `);
+
+  return (
+    <>
+      <Header siteTitle={data.site.siteMetadata.title} />
+      <MainContentContainer>
+        <main>{children}</main>
+      </MainContentContainer>
+    </>
+  );
+};
+
+PageLayout.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default PageLayout;

src/pages/404.js

@@ -1,14 +1,14 @@
 import React from "react";
 
-import Layout from "../components/layout";
+import PageLayout from "../components/PageLayout";
 import SEO from "../components/seo";
 
 const NotFoundPage = () => (
-  <Layout>
+  <PageLayout>
     <SEO title="404: Not found" />
     <h1>NOT FOUND</h1>
     <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
-  </Layout>
+  </PageLayout>
 );
 
 export default NotFoundPage;

src/pages/index.js

@@ -1,14 +1,14 @@
 import React from "react";
 import { Link } from "gatsby";
-import Layout from "../components/layout";
+import PageLayout from "../components/PageLayout";
 import SEO from "../components/seo";
 
 const IndexPage = () => (
-  <Layout>
+  <PageLayout>
     <SEO title="Home" />
     <h1>🤔 I'm not sure how you got here, but click the link below to begin.</h1>
     <Link to="/what-are-hooks/">Go to page 2</Link>
-  </Layout>
+  </PageLayout>
 );
 
 export default IndexPage;

src/templates/MDPage.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { graphql, navigate } from "gatsby";
 import styled from 'styled-components';
-import Layout from "../components/layout";
+import PageLayout from "../components/PageLayout";
 import SEO from "../components/seo";
 import Button from "../components/Button";
 
@@ -29,7 +29,7 @@ export default ({ data }) => {
   };
 
   return (
-    <Layout>
+    <PageLayout>
       <SEO title={title} />
       <div>
         <h1>{title}</h1>
@@ -60,7 +60,7 @@ Next:
           }
         </div>
       </NavigationContainer>
-    </Layout>
+    </PageLayout>
   );
 };