Widgets converted to components

src/views/widgets/Widget03.vue

@@ -1,31 +1,31 @@
 <template>
-  <div class={classes}>
-    <div class={classCardHeader}>
-      <i class={icon}></i>
-      {children}
-    </div>
-    <div class={classCardBody}>
-      <div>
-        <div class="text-value">{vals[1]}</div>
-        <div class="text-uppercase text-muted small">{keys[1]}</div>
-      </div>
-      <div>
-        <div class="text-value">{vals[2]}</div>
-        <div class="text-uppercase text-muted small">{keys[2]}</div>
-      </div>
-    </div>
-  </div>
+  <b-col cols="12" sm="6" lg="3">
+    <b-card :no-body="true">
+      <b-card-body class="p-0 clearfix">
+        <i :class="iconClasses" class="p-4 font-2xl mr-3 float-left"></i>
+        <div class="h5 text-primary mb-0 pt-3">{{header}}</div>
+        <div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div>
+      </b-card-body>
+    </b-card>
+  </b-col>
 </template>
 
 <script>
 export default {
   name: 'Widget03',
   props: {
-    value: {
-      type: Boolean,
-      default: true
-    }
+    iconClasses: {
+      type: String,
+      default: 'fa fa-cogs bg-primary'
+    },
+    header: {
+      type: String,
+      default: 'Lorem ipsum...'
+    },
+    text: {
+      type: String,
+      default: 'Income'
+    },
   }
 }
 </script>
-