[part-08] Added "Layout" and "Navigation" components

- Updated templates with the shared "Layout" component

src/components/Layout.js

@@ -0,0 +1,22 @@
+// src/components/Layout.js
+
+import React from 'react'
+import Navigation from './Navigation.js'
+
+const Layout = (props) => {
+  return (
+    <div className="Layout">
+      <header>
+        <Navigation />
+      </header>
+      <main>
+        {props.children}
+      </main>
+      <footer>
+        <Navigation />
+      </footer>
+    </div>
+  )
+}
+
+export default Layout

src/components/Navigation.js

@@ -0,0 +1,16 @@
+// src/components/Navigation.js
+
+import { Link } from 'gatsby'
+import React from 'react'
+
+const Navigation = (props) => {
+  return (
+    <nav>
+      <Link to='/' activeStyle={{"fontWeight": "bold"}}>/index</Link>
+      <Link to='/about' activeStyle={{"fontWeight": "bold"}}>/about</Link>
+      <Link to='/designs' activeStyle={{"fontWeight": "bold"}}>/designs</Link>
+    </nav>
+  )
+}
+
+export default Navigation

src/templates/default-template.js

@@ -1,15 +1,18 @@
 // src/templates/default-template.js
 
 import React from 'react'
+import Layout from '../components/Layout.js';
 
 const DefaultTemplate = (props) => {
 
   console.log(props);
 
   return (
-    <div>
-      <h1>Default Template</h1>
-    </div>
+    <Layout>
+      <div>
+        <h1>Default Template</h1>
+      </div>
+    </Layout>
   )
 }
 

src/templates/designs-template.js

@@ -2,34 +2,37 @@
 
 import { graphql } from 'gatsby';
 import React from 'react'
+import Layout from '../components/Layout.js';
 
 const DesignsTemplate = (props) => {
 
   console.log(props.data);
 
   return (
-    <div>
-      <h1>Designs Page Template</h1>
-      <h2>{props.data.markdownRemark.frontmatter.title}</h2>
-      <p>{props.data.markdownRemark.frontmatter.description}</p>
-      <div
-        dangerouslySetInnerHTML={{
-          __html: props.data.markdownRemark.html
-        }}>
+    <Layout>
+      <div>
+        <h1>Designs Page Template</h1>
+        <h2>{props.data.markdownRemark.frontmatter.title}</h2>
+        <p>{props.data.markdownRemark.frontmatter.description}</p>
+        <div
+          dangerouslySetInnerHTML={{
+            __html: props.data.markdownRemark.html
+          }}>
+        </div>
+        <ul>
+          {
+            props.data.allMarkdownRemark.edges.map((edge) => {
+              return (
+                <li key={edge.node.id}>
+                  <h1>{edge.node.frontmatter.title}</h1>
+                  <p>{edge.node.frontmatter.description}</p>
+                </li>
+              );
+            })
+          }
+        </ul>
       </div>
-      <ul>
-        {
-          props.data.allMarkdownRemark.edges.map((edge) => {
-            return (
-              <li key={edge.node.id}>
-                <h1>{edge.node.frontmatter.title}</h1>
-                <p>{edge.node.frontmatter.description}</p>
-              </li>
-            );
-          })
-        }
-      </ul>
-    </div>
+    </Layout>
   )
 }
 

src/templates/page-template.js

@@ -2,22 +2,25 @@
 
 import { graphql } from 'gatsby';
 import React from 'react'
+import Layout from '../components/Layout.js';
 
 const PageTemplate = (props) => {
 
   console.log(props.data);
 
   return (
-    <div>
-      <h1>Page Template</h1>
-      <h2>{props.data.markdownRemark.frontmatter.title}</h2>
-      <p>{props.data.markdownRemark.frontmatter.description}</p>
-      <div
-        dangerouslySetInnerHTML={{
-          __html: props.data.markdownRemark.html
-        }}>
+    <Layout>
+      <div>
+        <h1>Page Template</h1>
+        <h2>{props.data.markdownRemark.frontmatter.title}</h2>
+        <p>{props.data.markdownRemark.frontmatter.description}</p>
+        <div
+          dangerouslySetInnerHTML={{
+            __html: props.data.markdownRemark.html
+          }}>
+        </div>
       </div>
-    </div>
+    </Layout>
   )
 }