Add update guide button

pull/1331/head
Kamran Ahmed 5 years ago
parent acec5d610c
commit b1ee86e1c0
  1. 16
      components/guide-header/index.js
  2. 12
      components/guide-header/style.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>
);

@ -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``;
Loading…
Cancel
Save