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.

63 lines
2.4 KiB

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowLeft, faClock, faEnvelope, faHandshake } from '@fortawesome/free-solid-svg-icons';
import { BadgeLink, BadgesList, DarkBadge, PrimaryBadge, SecondaryBadge } from 'components/badges';
import siteConfig from "content/site";
import { Description, Header, Title, MenuItemLink, MenuItems } from './style';
import Link from 'next/link';
import classNames from 'classnames';
const RoadmapHeader = ({ roadmap, page = 'landscape' }) => (
<Header>
<Title>{ roadmap.title }</Title>
<Description>{ roadmap.description }</Description>
<BadgesList className="mt-4">
<BadgeLink href="/roadmaps">
<DarkBadge>
5 years ago
<FontAwesomeIcon className='d-none d-md-block' icon={ faArrowLeft } />
Other Roadmaps
</DarkBadge>
</BadgeLink>
{ roadmap.upcoming && (
<BadgeLink href="/signup">
<SecondaryBadge>
5 years ago
<FontAwesomeIcon className='d-none d-md-block' icon={ faClock } />
Upcoming Roadmap
</SecondaryBadge>
</BadgeLink>
) }
{ !roadmap.upcoming && (
5 years ago
<BadgeLink href={ `${siteConfig.url.issue}?title=[${roadmap.title}] - Title Here` } target="_blank" className='d-none d-md-block' >
<SecondaryBadge>
5 years ago
<FontAwesomeIcon icon={ faHandshake } />
Suggest Changes
</SecondaryBadge>
</BadgeLink>
) }
<BadgeLink href="/signup">
<PrimaryBadge>
5 years ago
<FontAwesomeIcon className='d-none d-md-block' icon={ faEnvelope } />
Send me Updates
</PrimaryBadge>
</BadgeLink>
</BadgesList>
<MenuItems className="border-bottom">
<div className={ classNames({ 'd-none': roadmap.title.toLowerCase() !== 'frontend developer' })}>
<Link href={ `${roadmap.url}` } passHref>
<MenuItemLink className={ classNames({ active: page === 'landscape', }) }>Landscape</MenuItemLink>
</Link>
<Link href={ `${roadmap.url}/resources` } passHref>
<MenuItemLink className={ classNames({ active: page === 'resources', }) }>Follow the Path</MenuItemLink>
</Link>
{/*<Link href={ `${roadmap.url}/resources` } passHref>*/}
{/* <MenuItemLink className={ classNames({ active: false, }) }>Project Ideas</MenuItemLink>*/}
{/*</Link>*/}
</div>
</MenuItems>
</Header>
);
export default RoadmapHeader;