Add roadmap summary page
This commit is contained in:
@ -1,4 +1,6 @@
|
|||||||
import { FeaturedContentWrap } from './style';
|
import { FeaturedContentWrap } from './style';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import roadmaps from '../../data/roadmaps';
|
||||||
|
|
||||||
const FeaturedRoadmaps = () => (
|
const FeaturedRoadmaps = () => (
|
||||||
<FeaturedContentWrap className="featured-content-wrap">
|
<FeaturedContentWrap className="featured-content-wrap">
|
||||||
@ -8,29 +10,25 @@ const FeaturedRoadmaps = () => (
|
|||||||
<p className="border-through featured-separator">
|
<p className="border-through featured-separator">
|
||||||
<span>
|
<span>
|
||||||
List of roadmaps mostly visited by the community
|
List of roadmaps mostly visited by the community
|
||||||
<a href="#" className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Roadmaps →</a>
|
<Link href='/roadmaps'>
|
||||||
|
<a className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Roadmaps →</a>
|
||||||
|
</Link>
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="swim-lane row">
|
<div className="swim-lane row">
|
||||||
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
|
{ roadmaps
|
||||||
<a className="featured-block" href='#'>
|
.filter(({ featured }) => featured)
|
||||||
<h4>Frontend Developer</h4>
|
.map(roadmap => (
|
||||||
<p>Step by step guide to becoming a modern frontend developer in 2019</p>
|
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
|
||||||
</a>
|
<Link href={ roadmap.slug }>
|
||||||
</div>
|
<a className="featured-block">
|
||||||
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
|
<h4>{ roadmap.title }</h4>
|
||||||
<a className="featured-block" href='#'>
|
<p>{ roadmap.featuredDescription || roadmap.description }</p>
|
||||||
<h4>Backend Developer</h4>
|
</a>
|
||||||
<p>Step by step guide to becoming a modern backend developer in 2019</p>
|
</Link>
|
||||||
</a>
|
</div>
|
||||||
</div>
|
)) }
|
||||||
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
|
|
||||||
<a className="featured-block" href='#'>
|
|
||||||
<h4>DevOps Roadmap</h4>
|
|
||||||
<p>Step by step guide to become an SRE or for any operations role in 2019</p>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</FeaturedContentWrap>
|
</FeaturedContentWrap>
|
||||||
|
24
components/roadmap-summary/index.js
Normal file
24
components/roadmap-summary/index.js
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import {
|
||||||
|
SummaryContainer,
|
||||||
|
Title,
|
||||||
|
Description,
|
||||||
|
Image,
|
||||||
|
Header,
|
||||||
|
Summary,
|
||||||
|
} from './style';
|
||||||
|
|
||||||
|
const RoadmapSummary = ({ roadmap }) => (
|
||||||
|
<SummaryContainer>
|
||||||
|
<Header>
|
||||||
|
<Title>{ roadmap.title }</Title>
|
||||||
|
<Description>{ roadmap.description }</Description>
|
||||||
|
</Header>
|
||||||
|
<Summary className="border-top border-bottom">
|
||||||
|
<div className="container">
|
||||||
|
<Image src={ roadmap.picture } />
|
||||||
|
</div>
|
||||||
|
</Summary>
|
||||||
|
</SummaryContainer>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default RoadmapSummary;
|
26
components/roadmap-summary/style.js
Normal file
26
components/roadmap-summary/style.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import styled from 'styled-components';
|
||||||
|
|
||||||
|
export const SummaryContainer = styled.div``;
|
||||||
|
|
||||||
|
export const Header = styled.div`
|
||||||
|
text-align: center;
|
||||||
|
padding: 55px 0 45px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const Summary = styled.div`
|
||||||
|
text-align: center;
|
||||||
|
padding: 50px 0;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const Title = styled.h1`
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
font-size: 42px;
|
||||||
|
`;
|
||||||
|
export const Description = styled.p`
|
||||||
|
font-size: 19px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
`;
|
||||||
|
export const Image = styled.img`
|
||||||
|
width: 100%;
|
||||||
|
`;
|
@ -1,20 +1,26 @@
|
|||||||
[
|
[
|
||||||
{
|
{
|
||||||
"title": "Frontend Developer",
|
"title": "Frontend Developer",
|
||||||
"description": "Roadmap to becoming a frontend developer",
|
"description": "Step by step guide to becoming a modern frontend developer",
|
||||||
|
"featuredDescription": "Step by step guide to becoming a modern frontend developer in 2019",
|
||||||
"slug": "/frontend",
|
"slug": "/frontend",
|
||||||
"picture": "/static/roadmaps/frontend.png"
|
"picture": "/static/roadmaps/frontend.png",
|
||||||
|
"featured": true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Backend Developer",
|
"title": "Backend Developer",
|
||||||
"description": "Roadmap to becoming a backend developer",
|
"description": "Roadmap to becoming a backend developer",
|
||||||
|
"featuredDescription": "Step by step guide to becoming a modern backend developer in 2019",
|
||||||
"slug": "/backend",
|
"slug": "/backend",
|
||||||
"picture": "/static/roadmaps/backend.png"
|
"picture": "/static/roadmaps/backend.png",
|
||||||
|
"featured": true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "DevOps",
|
"title": "DevOps Roadmap",
|
||||||
"description": "Roadmap for DevOps or any other Operations Role",
|
"description": "Roadmap for DevOps or any other Operations Role",
|
||||||
|
"featuredDescription": "Step by step guide to become an SRE or for any operations role in 2019",
|
||||||
"slug": "/devops",
|
"slug": "/devops",
|
||||||
"picture": "/static/roadmaps/devops.png"
|
"picture": "/static/roadmaps/devops.png",
|
||||||
|
"featured": true
|
||||||
}
|
}
|
||||||
]
|
]
|
@ -2,14 +2,15 @@ import roadmaps from "../../data/roadmaps";
|
|||||||
import DefaultLayout from '../../layouts/default/index';
|
import DefaultLayout from '../../layouts/default/index';
|
||||||
import PageHeader from '../../components/page-header/index';
|
import PageHeader from '../../components/page-header/index';
|
||||||
import { serverOnlyProps } from '../../lib/server';
|
import { serverOnlyProps } from '../../lib/server';
|
||||||
|
import RoadmapSummary from '../../components/roadmap-summary';
|
||||||
|
import PageFooter from '../../components/page-footer';
|
||||||
|
|
||||||
const Roadmap = ({ roadmap }) => {
|
const Roadmap = ({ roadmap }) => {
|
||||||
return (
|
return (
|
||||||
<DefaultLayout>
|
<DefaultLayout>
|
||||||
<PageHeader />
|
<PageHeader />
|
||||||
<div className="container">
|
<RoadmapSummary roadmap={ roadmap } />
|
||||||
<img src={ roadmap.picture } alt="" />
|
<PageFooter />
|
||||||
</div>
|
|
||||||
</DefaultLayout>
|
</DefaultLayout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
Reference in New Issue
Block a user