Roadmap to becoming a developer in 2022
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

41 lines
1008 B

import formatDate from 'date-fns/format'
import {
ActionItems,
AuthorImage,
EditGuide,
GuideAuthor,
GuideDate,
GuideMeta,
GuideSubtitle,
GuideTitle,
HeaderWrap,
} from './style';
import { getContributionUrl } from "lib/guide";
import { getTwitterUrl } from "lib/url";
5 years ago
const GuideHeader = ({
guide,
guide: {
author = {}
} = {}
}) => (
5 years ago
<HeaderWrap className="border-bottom">
<GuideMeta>
<GuideAuthor href={ getTwitterUrl(author.twitter) } target="_blank">
<AuthorImage src={ author.picture } />
{ author.name }
5 years ago
</GuideAuthor>
&middot;
<GuideDate>{ formatDate(new Date(guide.createdAt), 'EEEE, MMMM d yyyy') }</GuideDate>
&middot;
<EditGuide href={ getContributionUrl(guide) } target="_blank">Improve this Guide</EditGuide>
5 years ago
</GuideMeta>
<GuideTitle>{ guide.title }</GuideTitle>
<GuideSubtitle>{ guide.description }</GuideSubtitle>
<ActionItems>
</ActionItems>
5 years ago
</HeaderWrap>
);
export default GuideHeader;