Add update guide button

components/guide-header/index.js

@@ -1,4 +1,14 @@
-import { AuthorImage, GuideAuthor, GuideDate, GuideMeta, GuideSubtitle, GuideTitle, HeaderWrap } from './style';
+import {
+  ActionItems,
+  AuthorImage,
+  EditGuide,
+  GuideAuthor,
+  GuideDate,
+  GuideMeta,
+  GuideSubtitle,
+  GuideTitle,
+  HeaderWrap,
+} from './style';
 
 const GuideHeader = (props) => (
   <HeaderWrap className="border-bottom">
@@ -9,9 +19,13 @@ const GuideHeader = (props) => (
       </GuideAuthor>
       &middot;
       <GuideDate>Wednesday, October 9th 2019</GuideDate>
+      &middot;
+      <EditGuide href="#">Edit this Guide</EditGuide>
     </GuideMeta>
     <GuideTitle>Design Patterns for Humans</GuideTitle>
     <GuideSubtitle>An ultra-simplified explanation to design patterns</GuideSubtitle>
+    <ActionItems>
+    </ActionItems>
   </HeaderWrap>
 );
 

components/guide-header/style.js

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 export const HeaderWrap = styled.div`
   padding: 80px 15px 45px;
   text-align: center;
+  margin-bottom: 50px;
 `;
 
 export const GuideTitle = styled.h1`
@@ -26,7 +27,9 @@ export const GuideMeta = styled.p`
 
 export const GuideDate = styled.span`
   margin-left: 7px;
+  margin-right: 7px;
 `;
+
 export const GuideAuthor = styled.a`
   margin-right: 7px;
   font-weight: 500;
@@ -36,9 +39,16 @@ export const GuideAuthor = styled.a`
     color: #101010;
   }
 `;
+
 export const AuthorImage = styled.img`
   width: 22px;
   height: 22px;
   border-radius: 100%;
   margin-right: 10px;
-`;
+`;
+
+export const EditGuide = styled.a`
+  margin-left: 7px;
+`;
+
+export const ActionItems = styled.div``;