From 03584d67d8062c3e5bb5bed0b753cd011b10a101 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 1 Nov 2019 03:31:26 +0400
Subject: [PATCH] Move roadmap block to separate component

---
 components/featured-content/roadmaps.js | 14 +++------
 components/featured-content/style.js    | 32 ---------------------
 components/roadmap-block/index.js       | 15 ++++++++++
 components/roadmap-block/style.js       | 38 +++++++++++++++++++++++++
 4 files changed, 57 insertions(+), 42 deletions(-)
 create mode 100644 components/roadmap-block/index.js
 create mode 100644 components/roadmap-block/style.js

diff --git a/components/featured-content/roadmaps.js b/components/featured-content/roadmaps.js
index a47991fc8..37ebbb793 100644
--- a/components/featured-content/roadmaps.js
+++ b/components/featured-content/roadmaps.js
@@ -1,13 +1,14 @@
-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">
     <div className="container">
       <div className="featured-head">
         <h3>Featured Content</h3>
-        <p className="border-through  featured-separator">
+        <p className="border-through featured-separator">
             <span>
               List of roadmaps mostly visited by the community&nbsp;
               <Link href='/roadmaps'>
@@ -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>
diff --git a/components/featured-content/style.js b/components/featured-content/style.js
index 103f7c8fc..90b9892d4 100644
--- a/components/featured-content/style.js
+++ b/components/featured-content/style.js
@@ -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;
-      }
     }
   }
 
diff --git a/components/roadmap-block/index.js b/components/roadmap-block/index.js
new file mode 100644
index 000000000..b82a1c1f7
--- /dev/null
+++ b/components/roadmap-block/index.js
@@ -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;
\ No newline at end of file
diff --git a/components/roadmap-block/style.js b/components/roadmap-block/style.js
new file mode 100644
index 000000000..31c403301
--- /dev/null
+++ b/components/roadmap-block/style.js
@@ -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;
+`;
\ No newline at end of file