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

Move roadmap block to separate component

Browse Source
This commit is contained in:
Kamran Ahmed
2019-11-01 03:31:26 +04:00
parent bdfe81ce1f
commit 03584d67d8
4 changed files with 57 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/featured-content/roadmaps.js
View File

@ -1,6 +1,7 @@
import { FeaturedContentWrap } from './style';
import Link from 'next/link';
import { FeaturedContentWrap } from './style';
import roadmaps from '../../data/roadmaps';
import RoadmapBlock from '../roadmap-block';
const FeaturedRoadmaps = () => (
<FeaturedContentWrap className="featured-content-wrap">
@ -20,14 +21,7 @@ const FeaturedRoadmaps = () => (
{ roadmaps
.filter(({ featured }) => featured)
.map(roadmap => (
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container" key={roadmap.slug}>
<Link href={ roadmap.slug }>
<a className="featured-block">
<h4>{ roadmap.title }</h4>
<p>{ roadmap.featuredDescription || roadmap.description }</p>
</a>
</Link>
</div>
<RoadmapBlock roadmap={ roadmap } key={ roadmap.slug } />
)) }
</div>
</div>

32
components/featured-content/style.js
View File

@ -39,38 +39,6 @@ export const FeaturedContentWrap = styled.div`
.swim-lane {
.featured-block {
border: 1px solid #f7f7f7;
display: block;
text-decoration: none;
color: #000000;
background: #ffffff;
padding: 28px 25px 25px;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px;
transition: box-shadow 0.2s ease 0s;
cursor: pointer;
margin-bottom: 32px;
&:hover {
box-shadow: rgba(0, 0, 0, 0.12) 0 30px 60px;
}
h4 {
line-height: 27px;
font-weight: 600;
font-size: 22px;
white-space: nowrap;
text-overflow: ellipsis;
flex: 0 0 auto;
overflow: hidden;
}
p {
font-size: 15px;
line-height: 25px;
color: #999999;
margin-bottom: 0;
}
}
}

15
components/roadmap-block/index.js Normal file
View File

@ -0,0 +1,15 @@
import Link from 'next/link';
import { BlockLink, BlockSubtitle, BlockTitle } from './style';
const RoadmapBlock = ({ roadmap }) => (
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
<Link href={ roadmap.slug } passHref>
<BlockLink>
<BlockTitle>{ roadmap.title }</BlockTitle>
<BlockSubtitle>{ roadmap.featuredDescription || roadmap.description }</BlockSubtitle>
</BlockLink>
</Link>
</div>
);
export default RoadmapBlock;

38
components/roadmap-block/style.js Normal file
View File

@ -0,0 +1,38 @@
import styled from 'styled-components';
export const BlockLink = styled.a`
border: 1px solid #f7f7f7;
display: block;
text-decoration: none;
color: #000000;
background: #ffffff;
padding: 28px 25px 25px;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px;
transition: box-shadow 0.2s ease 0s;
cursor: pointer;
margin-bottom: 32px;
&:hover {
text-decoration: none;
color: #000000;
box-shadow: rgba(0, 0, 0, 0.12) 0 30px 60px;
}
`;
export const BlockTitle = styled.h4`
line-height: 27px;
font-weight: 600;
font-size: 22px;
white-space: nowrap;
text-overflow: ellipsis;
flex: 0 0 auto;
overflow: hidden;
`;
export const BlockSubtitle = styled.p`
font-size: 15px;
line-height: 25px;
color: #999999;
margin-bottom: 0;
`;