From 93b68991dccbaf1f290f631153968e6de748dcc2 Mon Sep 17 00:00:00 2001
From: Julien <julien.le.coupanec@gmail.com>
Date: Sun, 9 Sep 2018 19:18:40 +0200
Subject: [PATCH] feat(base-divider): initializing component

---
 .../{CategoryDivider.vue => BaseDivider.vue}  | 34 +++++++++++++-
 components/TheCopyright.vue                   |  2 +-
 pages/index.vue                               | 44 ++++++++++++++++---
 3 files changed, 70 insertions(+), 10 deletions(-)
 rename components/{CategoryDivider.vue => BaseDivider.vue} (54%)

diff --git a/components/CategoryDivider.vue b/components/BaseDivider.vue
similarity index 54%
rename from components/CategoryDivider.vue
rename to components/BaseDivider.vue
index 226b302..4e41ef9 100644
--- a/components/CategoryDivider.vue
+++ b/components/BaseDivider.vue
@@ -3,7 +3,10 @@
      ************************************************************************* -->
 
 <template lang="pug">
+.c-base-divider
+  span.c-base-divider__category {{ category }}
 
+  hr.c-base-divider__line
 </template>
 
 <!-- *************************************************************************
@@ -11,11 +14,38 @@
      ************************************************************************* -->
 
 <script>
-export default {};
+export default {
+  props: {
+    category: {
+      name: String,
+      required: true
+    }
+  }
+};
 </script>
 
 <!-- *************************************************************************
      STYLE
      ************************************************************************* -->
 
-<style lang="scss"></style>
+<style lang="scss">
+$c: ".c-base-divider";
+
+#{$c} {
+  display: flex;
+  align-items: center;
+
+  #{$c}__category {
+    font-size: 18px;
+    color: #ffffff;
+    text-transform: uppercase;
+    font-weight: bold;
+    margin-right: 40px;
+  }
+
+  #{$c}__line {
+    flex: 1;
+    color: #313d4f;
+  }
+}
+</style>
diff --git a/components/TheCopyright.vue b/components/TheCopyright.vue
index ef9b5ab..854e1db 100644
--- a/components/TheCopyright.vue
+++ b/components/TheCopyright.vue
@@ -28,7 +28,7 @@ $c: ".c-the-copyright";
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 5px 5px 5px 15px;
+  padding: 5px 5px 5px 10px;
   border-top: 1px solid #313d4f;
   border-left: 1px solid #313d4f;
   border-top-left-radius: 4px;
diff --git a/pages/index.vue b/pages/index.vue
index 71f91ae..cd2db89 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -9,10 +9,17 @@
     srcset="/images/common/logo@2x.png"
     class="c-index__logo"
   )
-  p(
-    v-html="description"
-    class="c-index__description"
+  p.c-index__description
+    | Awesome cheatsheets for popular programming languages, frameworks and development tools.<br/>
+    | They include everything you should know in one single file. 👩‍💻👨‍💻
+
+  section(
+    v-for="(category, index) in categories"
+    class="c-index__category"
   )
+    base-divider(
+      :category="'0' + (index + 1) + '. ' + category.name"
+    )
 </template>
 
 <!-- *************************************************************************
@@ -20,13 +27,32 @@
      ************************************************************************* -->
 
 <script>
+import BaseDivider from "@/components/BaseDivider";
+
 export default {
+  components: {
+    BaseDivider
+  },
+
   data() {
     return {
-      description: `
-        Awesome cheatsheets for popular programming languages, frameworks and development tools.<br/>
-        They include everything you should know in one single file. 👩‍💻👨‍💻
-      `
+      categories: [
+        {
+          name: "Languages"
+        },
+        {
+          name: "Backend"
+        },
+        {
+          name: "Frontend"
+        },
+        {
+          name: "Databases"
+        },
+        {
+          name: "Tools"
+        }
+      ]
     };
   }
 };
@@ -52,5 +78,9 @@ $c: ".c-index";
     font-size: 24px;
     line-height: 36px;
   }
+
+  #{$c}__category {
+    margin-bottom: 30px;
+  }
 }
 </style>