feat(dashboard): add status cards

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

@@ -0,0 +1,14 @@
+<div class="row status-cards">
+  <div class="col-lg-3" *ngFor="let card of statusCards">
+    <nga-card (click)="card.on = !card.on" [ngClass]="{'on': 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>

src/app/pages/dashboard/dashboard.component.scss

@@ -0,0 +1,74 @@
+@import '~@nga/theme/styles/themes/cosmic/theme';
+
+:host {
+}
+
+.status-cards {
+  nga-card {
+    flex-direction: row;
+    align-items: center;
+    height: 6rem;
+    box-shadow: 0 3px 0 0 #322f70, 4px 0 18px 0 rgba(19, 19, 94, 0.4);
+    overflow: visible;
+    cursor: pointer;
+
+    position: relative;
+    &::before {
+      position: absolute;
+      content: '';
+      height: calc(100% + 3px);
+      width: 100%;
+      left: 0;
+      top: 0;
+      background: rgba(0, 0, 0, 0.1);
+      border-radius: $nga-card-border-radius;
+    }
+
+    &.on {
+      box-shadow: inset 0 3px 9px 0 #322f70, 4px 0 18px 0 rgba(19, 19, 94, 0.4);
+
+      .icon-container {
+        box-shadow: none;
+        &.success {
+          box-shadow: inset 0 5px 9px 0 #00967d, 0 4px 10px 0 rgba(33, 7, 77, 0.5), 0 2px 12px 0 rgba(35, 255, 181, 0.6);
+        }
+      }
+      &::before {
+        display: none;
+      }
+    }
+  }
+
+  .icon-container {
+    font-size: 4em;
+    padding: 0.5rem 1.75rem;
+    color: $nga-card-foreground;
+    border-radius: $nga-card-border-radius 0 0 $nga-card-border-radius;
+
+    &.primary {
+      @include btn-hero-primary();
+    }
+    &.success {
+      @include btn-hero-success();
+    }
+    &.info {
+      @include btn-hero-info();
+    }
+    &.warning {
+      @include btn-hero-warning();
+    }
+  }
+
+  .details {
+    margin-left: 1.5rem;
+  }
+  .title {
+    font-size: 1.5rem;
+  }
+  .status {
+    font-size: 1.125rem;
+    font-weight: $nga-font-weight-light;
+    text-transform: uppercase;
+    color: $nga-card-foreground-secondary;
+  }
+}

src/app/pages/dashboard/dashboard.component.ts

@@ -2,93 +2,14 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ngx-dashboard',
-  template: `
+  styleUrls: ['./dashboard.component.scss'],
-    <nga-card>
+  templateUrl: './dashboard.component.html',
-      <nga-card-header>Test card</nga-card-header>  
-      <nga-card-body>Some Body</nga-card-body>
-      <nga-card-footer>Super Footer</nga-card-footer>
-    </nga-card>
-    <nga-card>
-      <nga-card-header>Test card</nga-card-header>
-      <nga-card-body>Some Body</nga-card-body>
-      <nga-card-footer>Super Footer</nga-card-footer>
-    </nga-card>
-    <nga-card>
-      <nga-card-header>Test card</nga-card-header>
-      <nga-card-body>Some Body</nga-card-body>
-      <nga-card-footer>Super Footer</nga-card-footer>
-    </nga-card>
-    <nga-card>
-      <nga-card-header>Test card</nga-card-header>
-      <nga-card-body>Some Body</nga-card-body>
-      <nga-card-footer>Super Footer</nga-card-footer>
-    </nga-card>
-    <nga-card>
-      <nga-card-header>Test card</nga-card-header>
-      <nga-card-body>Some Body</nga-card-body>
-      <nga-card-footer>Super Footer</nga-card-footer>
-    </nga-card>
-    <nga-card>
-      <nga-card-header>Test card</nga-card-header>
-      <nga-card-body>Some Body</nga-card-body>
-      <nga-card-footer>Super Footer</nga-card-footer>
-    </nga-card>
-    <nga-card>
-      <nga-card-header>Test card</nga-card-header>
-      <nga-card-body>Some Body</nga-card-body>
-      <nga-card-footer>Super Footer</nga-card-footer>
-    </nga-card>
-    <nga-card>
-      <nga-card-header>Test card</nga-card-header>
-      <nga-card-body>Some Body</nga-card-body>
-      <nga-card-footer>Super Footer</nga-card-footer>
-    </nga-card>
-    <nga-card>
-      <nga-card-header>Test card</nga-card-header>
-      <nga-card-body>Some Body</nga-card-body>
-      <nga-card-footer>Super Footer</nga-card-footer>
-    </nga-card>
-    <nga-card>
-      <nga-card-header>Test card</nga-card-header>
-      <nga-card-body>Some Body</nga-card-body>
-      <nga-card-footer>Super Footer</nga-card-footer>
-    </nga-card>
-    <nga-card>
-      <nga-card-header>Test card</nga-card-header>
-      <nga-card-body>Some Body</nga-card-body>
-      <nga-card-footer>Super Footer</nga-card-footer>
-    </nga-card>
-    <nga-card>
-      <nga-card-header>Test card</nga-card-header>
-      <nga-card-body>Some Body</nga-card-body>
-      <nga-card-footer>Super Footer</nga-card-footer>
-    </nga-card>
-    <nga-card>
-      <nga-card-header>Test card</nga-card-header>
-      <nga-card-body>Some Body</nga-card-body>
-      <nga-card-footer>Super Footer</nga-card-footer>
-    </nga-card>
-    <nga-card>
-      <nga-card-header>Test card</nga-card-header>
-      <nga-card-body>Some Body</nga-card-body>
-      <nga-card-footer>Super Footer</nga-card-footer>
-    </nga-card>
-    <nga-card>
-      <nga-card-header>Test card</nga-card-header>
-      <nga-card-body>Some Body</nga-card-body>
-      <nga-card-footer>Super Footer</nga-card-footer>
-    </nga-card>
-    <nga-card>
-      <nga-card-header>Test card</nga-card-header>
-      <nga-card-body>Some Body</nga-card-body>
-      <nga-card-footer>Super Footer</nga-card-footer>
-    </nga-card>
-    <nga-card>
-      <nga-card-header>Test card</nga-card-header>
-      <nga-card-body>Some Body</nga-card-body>
-      <nga-card-footer>Super Footer</nga-card-footer>
-    </nga-card>
-  `,
 })
 export class DashboardComponent {
+  statusCards = [
+    { title: 'Light', on: true, type: 'primary', icon: 'ion-ios-game-controller-b-outline' },
+    { title: 'RollerShades', on: false, type: 'success', icon: 'ion-ios-game-controller-b-outline' },
+    { title: 'Wireless Audio', on: true, type: 'info', icon: 'ion-ios-game-controller-b-outline' },
+    { title: 'Coffee Maker', on: false, type: 'warning', icon: 'ion-ios-game-controller-b-outline' },
+  ];
 }