gaspersic/developer-roadmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Split roadmap header to separate component

Browse Source
This commit is contained in:
Kamran Ahmed
2019-11-30 09:06:06 +04:00
parent b5c65b408b
commit 618b55f601
9 changed files with 112 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
components/roadmap-summary/index.js
View File

@@ -1,72 +0,0 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowLeft, faClock, faEnvelope, faHandshake } from '@fortawesome/free-solid-svg-icons';
import { Description, Header, Summary, SummaryContainer, Title, VersionList } from './style';
import SharePage from 'components/share-page';
import { BadgeLink, BadgesList, DarkBadge, PrimaryBadge, SecondaryBadge } from 'components/badges';
import siteConfig from "storage/site";
import MdRenderer from '../md-renderer';
const UpcomingGuide = require(`../../storage/guides/upcoming.md`).default;
const RoadmapSummary = ({ roadmap }) => {
return (
<SummaryContainer>
<Header>
<Title>{ roadmap.title }</Title>
<Description>{ roadmap.description }</Description>
<BadgesList className="mt-4">
<BadgeLink href="/roadmaps">
<DarkBadge>
<FontAwesomeIcon icon={ faArrowLeft } />
Other Roadmaps
</DarkBadge>
</BadgeLink>
{ roadmap.upcoming && (
<SecondaryBadge>
<FontAwesomeIcon icon={ faClock } />
Upcoming Roadmap
</SecondaryBadge>
) }
{ !roadmap.upcoming && (
<BadgeLink href={ `${siteConfig.url.issue}?title=[${roadmap.title}] - Title Here` } target="_blank">
<SecondaryBadge>
<FontAwesomeIcon icon={ faHandshake } />
Suggest Changes
</SecondaryBadge>
</BadgeLink>
) }
<BadgeLink href="/signup">
<PrimaryBadge>
<FontAwesomeIcon icon={ faEnvelope } />
Send me Updates
</PrimaryBadge>
</BadgeLink>
</BadgesList>
<VersionList className="border-bottom" />
</Header>
<Summary>
{
roadmap.upcoming && (
<div className="container container-small">
<MdRenderer>
<UpcomingGuide />
</MdRenderer>
</div>
)
}
{
!roadmap.upcoming && (
<div className="container text-left">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae blanditiis commodi, consequatur, dicta distinctio esse et id, ipsa labore libero nisi odit placeat possimus saepe sed vel vitae voluptate?</p>
<SharePage title={ roadmap.description } url={ roadmap.url } />
</div>
)
}
</Summary>
</SummaryContainer>
)
};
export default RoadmapSummary;