fix(dashboard): refactor status cards: move grid to dashboard

src/app/pages/dashboard/dashboard.component.html

@@ -1,5 +1,28 @@
-<ngx-status-cards>
+<div class="row">
-</ngx-status-cards>
+  <div class="col-lg-3">
+    <ngx-status-card title="Light" type="primary">
+      <i class="ion-ios-lightbulb-outline"></i>
+    </ngx-status-card>
+  </div>
+
+  <div class="col-lg-3">
+    <ngx-status-card title="Roller Shades" type="success">
+      <i class="ion-ios-photos-outline"></i>
+    </ngx-status-card>
+  </div>
+
+  <div class="col-lg-3">
+    <ngx-status-card title="Wireless Audio" type="info">
+      <i class="ion-ios-game-controller-b-outline"></i>
+    </ngx-status-card>
+  </div>
+
+  <div class="col-lg-3">
+    <ngx-status-card title="Coffee Maker" type="warning">
+      <i class="ion-ios-lightbulb-outline"></i>
+    </ngx-status-card>
+  </div>
+</div>
 
 <div class="row">
   <div class="col-lg-3">

src/app/pages/dashboard/dashboard.module.ts

@@ -3,7 +3,7 @@ import { NgaTabsetModule, NgaUserModule } from '@akveo/nga-theme';
 
 import { SharedModule } from '../../shared.module';
 import { DashboardComponent } from './dashboard.component';
-import { StatusCardsComponent } from './status-cards/status-cards.component';
+import { StatusCardComponent } from './status-card/status-card.component';
 import { ContactsComponent } from './contacts/contacts.component';
 import { RoomsComponent } from './rooms/rooms.component';
 import { RoomSelectorComponent } from './rooms/room-selector/room-selector.component';
@@ -22,7 +22,7 @@ import { WeatherComponent } from './weather/weather.component';
   ],
   declarations: [
     DashboardComponent,
-    StatusCardsComponent,
+    StatusCardComponent,
     TemperatureDraggerComponent,
     ContactsComponent,
     RoomSelectorComponent,

src/app/pages/dashboard/status-card/status-card.component.scss

@@ -7,7 +7,6 @@
     align-items: center;
     height: 6rem;
     overflow: visible;
-    cursor: pointer;
     color: nga-theme(card-fg-heading);
 
     $bevel: btn-hero-bevel(nga-theme(card-bg));

src/app/pages/dashboard/status-card/status-card.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'ngx-status-card',
+  styleUrls: ['./status-card.component.scss'],
+  template: `
+    <nga-card (click)="on = !on" [ngClass]="{'off': !on}">
+      <div class="icon-container {{ type }}">
+        <ng-content></ng-content>
+      </div>
+
+      <div class="details">
+        <div class="title">{{ title }}</div>
+        <div class="status">{{ on ? 'ON' : 'OFF' }}</div>
+      </div>
+    </nga-card>
+  `,
+})
+export class StatusCardComponent {
+
+  @Input() title: string;
+  @Input() type: string;
+  @Input() on: boolean = true;
+}

src/app/pages/dashboard/status-cards/status-cards.component.ts

@@ -1,30 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-status-cards',
-  styleUrls: ['./status-cards.component.scss'],
-  template: `
-    <div class="row">
-      <div class="col-lg-3" *ngFor="let card of statusCards" size="xsmall">
-        <nga-card (click)="card.on = !card.on" [ngClass]="{'off': !card.on}">
-          <div class="icon-container {{card.type}}">
-            <i class="{{card.icon}}"></i>
-          </div>
-
-          <div class="details">
-            <div class="title">{{card.title}}</div>
-            <div class="status">{{card.on ? 'ON' : 'OFF'}}</div>
-          </div>
-        </nga-card>
-      </div>
-    </div>
-  `,
-})
-export class StatusCardsComponent {
-  statusCards = [
-    { title: 'Light', on: true, type: 'primary', icon: 'ion-ios-lightbulb-outline' },
-    { title: 'Roller Shades', on: true, type: 'success', icon: 'ion-ios-photos-outline' },
-    { title: 'Wireless Audio', on: true, type: 'info', icon: 'ion-ios-game-controller-b-outline' },
-    { title: 'Coffee Maker', on: true, type: 'warning', icon: 'ion-ios-game-controller-b-outline' },
-  ];
-}