Merge pull request RyanWarner#13 from RyanWarner/with-styled-components

With styled components

.babelrc

@@ -1,6 +1,12 @@
 {
   "presets": ["next/babel"],
   "plugins": [
+    [
+      "styled-components",
+      {
+        "ssr": true
+      }
+    ],
     "@babel/plugin-proposal-export-default-from",
     [
       "module-resolver",

package.json

@@ -10,13 +10,16 @@
   "dependencies": {
     "@mdx-js/loader": "1.6.16",
     "@mdx-js/runtime": "1.6.16",
+    "@mdx-js/tag": "^0.20.3",
     "@next/mdx": "9.5.1",
+    "babel-plugin-styled-components": "^1.11.1",
     "fast-glob": "3.2.4",
     "gray-matter": "4.0.2",
     "next": "9.5.1",
     "prop-types": "15.7.2",
     "react": "16.13.1",
-    "react-dom": "16.13.1"
+    "react-dom": "16.13.1",
+    "styled-components": "^5.1.1"
   },
   "devDependencies": {
     "@babel/plugin-proposal-export-default-from": "7.10.4",

src/components/Example.js

@@ -1,6 +1,12 @@
-import React from 'react'
+import styled from 'styled-components'
+
+const ExampleComponent = styled.div`
+  color: green;
+`
 
 const Example = props =>
-  <h1>This is an example component</h1>
+  <ExampleComponent>
+    This is an example component
+  </ExampleComponent>
 
 export default Example

src/components/Footer/index.js

@@ -0,0 +1,22 @@
+import * as S from './styles'
+import { Width } from 'components'
+import siteMetadata from 'siteMetadata'
+
+const Footer = props =>
+  <Width {...props}>
+    <S.Footer>
+      <S.Copyright>
+        © {new Date().getFullYear()} {siteMetadata.author}
+      </S.Copyright>
+      <S.Social>
+        <S.A href={`https://twitter.com/${siteMetadata.twitterHandle}`}>
+          <S.StyledTwitter />
+        </S.A>
+        <S.A href={`https://github.com/${siteMetadata.githubUsername}`}>
+          <S.StyledGitHub />
+        </S.A>
+      </S.Social>
+    </S.Footer>
+  </Width>
+
+export default Footer

src/components/Footer/styles.js

@@ -0,0 +1,39 @@
+import styled from 'styled-components'
+
+import Twitter from '../Twitter'
+import GitHub from '../GitHub'
+
+export const Footer = styled.footer`
+  height: 70px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border-top: 1px solid ${props => props.theme.rule};
+`
+
+export const Copyright = styled.p`
+  display: flex;
+  align-items: center;
+`
+
+export const Social = styled.div`
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+`
+
+export const StyledGitHub = styled(GitHub)`
+  margin-left: 12px;
+`
+
+export const StyledTwitter = styled(Twitter)`
+
+`
+
+export const A = styled.a`
+  &:hover {
+    path {
+      fill: ${props => props.theme.green10};
+    }
+  }
+`

src/components/GitHub.js

@@ -1,5 +1,3 @@
-import React from 'react'
-
 const GitHub = props =>
   <svg
     {...props}

src/components/Header.js

@@ -1,25 +1,73 @@
 import Link from 'next/link'
+import siteMetadata from 'siteMetadata'
+import styled from 'styled-components'
 
-const Nav = ({ children }) => (
-  <nav
-    style={{
-      height: '70px',
-      display: 'flex',
-      alignItems: 'center'
-    }}
-  >
-    {children}
-  </nav>
-)
+import { Width } from 'components'
+
+const Nav = styled.nav`
+  height: 70px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+`
+
+const Wordmark = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+const Logo = styled.span`
+  margin-right: 8px;
+  font-size: 20px;
+`
+
+const Name = styled.span`
+  font-weight: bold;
+`
+
+const NavItems = styled.ul`
+  margin-left: auto;
+  display: flex;
+`
+
+export const A = styled.a`
+  text-decoration: none;
+  color: ${props => props.theme.text10};
+  
+  &:hover {
+    color: ${props => props.theme.green10};
+  }
+`
+
+export const NavItem = styled.li`
+  margin-left: 24px;
+  list-style-type: none;
+`
 
 const Header = props =>
-  <Nav>
-    <Link href='/'>
-      <a>Home</a>
-    </Link>
-    <Link href='/about'>
-      <a>About</a>
-    </Link>
-  </Nav>
+  <Width>
+    <Nav>
+      <Link href='/' passHref>
+        <A>
+          <Wordmark>
+            <Logo>🌱</Logo>
+            <Name>{siteMetadata.author}</Name>
+          </Wordmark>
+        </A>
+      </Link>
+      <NavItems>
+        <NavItem>
+          <Link href='/garden' passHref>
+            <A>Digital Garden</A>
+          </Link>
+        </NavItem>
+        <NavItem>
+          <Link href='/about' passHref>
+            <A>About</A>
+          </Link>
+        </NavItem>
+      </NavItems>
+    </Nav>
+  </Width>
 
 export default Header