From cac3712b95ec941abf0aa14216a00c69efc4570a Mon Sep 17 00:00:00 2001
From: Do Nguyen Thanh <ntdo.13cdt1@gmail.com>
Date: Tue, 23 Mar 2021 22:01:22 +0700
Subject: [PATCH] general section

---
 components/BigElement.vue     | 23 ++++++++++-------
 components/GeneralSection.vue | 48 +++++++++++++++++++++++++++++++++++
 pages/index.vue               |  9 +++++--
 3 files changed, 69 insertions(+), 11 deletions(-)
 create mode 100644 components/GeneralSection.vue

diff --git a/components/BigElement.vue b/components/BigElement.vue
index a5d755b..bab7573 100644
--- a/components/BigElement.vue
+++ b/components/BigElement.vue
@@ -1,26 +1,26 @@
 <template>
   <div
-    v-if="data"
-    class="bg-secondary shadow rounded-3 p-2 border-top border-primary border-5"
+    v-if="socialData"
+    class="color-bg shadow rounded-3 p-2 border-top border-primary border-5"
     style="width: 250px"
   >
     <div class="m-3">
       <a-row justify="center" type="flex">
         <a-col :span="6" class="mr-5">
           <a-icon
-            :style="{ fontSize: '25px', color: '#e71b2b' }"
-            :type="data.icon"
+            :style="{ fontSize: '25px', color: 'hsl(348, 97%, 39%)' }"
+            :type="socialData.icon"
           />
         </a-col>
-        <a-col :span="6" class="text-white-50">{{ data.title }}</a-col>
+        <a-col :span="6" class="text-white-50">{{ socialData.title }}</a-col>
       </a-row>
     </div>
     <div>
       <h1 class="text-white fw-bolder" style="font-size: 60px">
-        {{ data.subscriberCount }}
+        {{ socialData.subscriberCount }}
       </h1>
-      <p class="text-white-75 lh-base fw-light">FOLLOWERS</p>
-      <p class="text-warning">- {{ data.percent }} Today</p>
+      <p class="text-white-50 lh-lg">FOLLOWERS</p>
+      <p class="text-success">- {{ socialData.percent }} Today</p>
     </div>
   </div>
 </template>
@@ -28,7 +28,7 @@
 <script>
 export default {
   props: {
-    data: {
+    socialData: {
       type: Object,
       default: () => {
         return {
@@ -42,3 +42,8 @@ export default {
   },
 }
 </script>
+<style>
+.color-bg {
+  background-color: #252b43;
+}
+</style>
diff --git a/components/GeneralSection.vue b/components/GeneralSection.vue
new file mode 100644
index 0000000..c9351cd
--- /dev/null
+++ b/components/GeneralSection.vue
@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <h1 class="text-white">Social Media Dashboard</h1>
+    <div class="d-flex flex-row">
+      <div v-for="(socialData, index) in items" :key="index">
+        <BigElement :social-data="socialData" class="m-3" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BigElement from '~/components/BigElement'
+
+export default {
+  components: { BigElement },
+  data() {
+    return {
+      items: [
+        {
+          icon: 'youtube',
+          title: '@ntdo',
+          subscriberCount: 1000,
+          percent: 20,
+        },
+        {
+          icon: 'youtube',
+          title: '@ntdo',
+          subscriberCount: 1000,
+          percent: 20,
+        },
+        {
+          icon: 'youtube',
+          title: '@ntdo',
+          subscriberCount: 1000,
+          percent: 20,
+        },
+        {
+          icon: 'youtube',
+          title: '@ntdo',
+          subscriberCount: 1000,
+          percent: 20,
+        },
+      ],
+    }
+  },
+}
+</script>
diff --git a/pages/index.vue b/pages/index.vue
index c192fea..6f860f7 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <div>
-      <BigElement />
+      <GeneralSection />
     </div>
     <a-row type="flex">
       <small-component
@@ -37,7 +37,11 @@
 </template>
 
 <script lang="ts">
-export default {}
+import Vue from 'vue'
+import GeneralSection from '~/components/GeneralSection.vue'
+export default Vue.extend({
+  components: { GeneralSection },
+})
 </script>
 
 <style>
@@ -48,5 +52,6 @@ export default {}
   justify-content: center;
   align-items: center;
   text-align: center;
+  background-color: #20222f;
 }
 </style>