Move roadmap block to separate component

pull/1331/head
Kamran Ahmed 5 years ago
parent bdfe81ce1f
commit 03584d67d8
  1. 12
      components/featured-content/roadmaps.js
  2. 32
      components/featured-content/style.js
  3. 15
      components/roadmap-block/index.js
  4. 38
      components/roadmap-block/style.js

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

@ -39,38 +39,6 @@ export const FeaturedContentWrap = styled.div`
.swim-lane { .swim-lane {
.featured-block { .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;
}
} }
} }

@ -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;

@ -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;
`;
Loading…
Cancel
Save