Added layout component

Author: praveen-me

gatsby-intro/gatsby-config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: ['gatsby-plugin-emotion'],
+};

gatsby-intro/package-lock.json

@@ -18,7 +18,10 @@
     "react-dom": "^16.8.6"
   },
   "devDependencies": {
+    "@emotion/core": "^10.0.22",
+    "@emotion/styled": "^10.0.23",
     "cross-env": "^5.2.0",
+    "gatsby-plugin-emotion": "^4.1.15",
     "prettier": "^1.18.2"
   },
   "repository": {

gatsby-intro/package.json

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Header = () => {
+  <div>This is my header</div>;
+};
+
+export default Header;

gatsby-intro/src/components/Header.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Global, css } from '@emotion/core';
+
+const Layout = ({ children }) => {
+  return (
+    <>
+      <Global
+        styles={css`
+          *,
+          *:after,
+          *:before {
+            box-sizing: border-box;
+            margin: 0;
+          }
+
+          * + * {
+            margin-top: 1rem;
+          }
+
+          html,
+          body {
+            margin: 0;
+            color: #555;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+              Helvetica, Arial, sans-serif;
+            font-size: 18px;
+            line-height: 1.4;
+
+            > div {
+              margin-top: 0;
+            }
+          }
+
+          h1,
+          h2,
+          h3,
+          h4,
+          h5,
+          h6 {
+            color: #222;
+            line-height: 1.1;
+
+            + * {
+              margin-top: 0.5rem;
+            }
+          }
+
+          strong {
+            color: #222;
+          }
+
+          li {
+            margin-top: 0.25rem;
+          }
+        `}
+      />
+      <header></header>
+      <main
+        css={css`
+          margin: 2rem auto 4rem;
+          max-width: 90vw;
+          width: 550px;
+        `}
+      >
+        {children}
+      </main>
+    </>
+  );
+};
+
+export default Layout;

gatsby-intro/src/components/Layout.js

@@ -1,3 +1,8 @@
 import React from 'react';
+import Layout from '../components/Layout';
 
-export default () => <div>Hello Frontend Masters!</div>;
+export default () => (
+  <Layout>
+    <div>Frontend Masters!</div>
+  </Layout>
+);