New dashboard look & feel

[src/xds/xds-agent.git] / webapp / src / app / pages / dashboard / status-card / status-card.component.ts

diff --git a/webapp/src/app/pages/dashboard/status-card/status-card.component.ts b/webapp/src/app/pages/dashboard/status-card/status-card.component.ts
new file mode 100644 (file)
index 0000000..6260803
--- /dev/null
+++ b/webapp/src/app/pages/dashboard/status-card/status-card.component.ts
@@ -0,0 +1,26 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'ngx-status-card',
+  styleUrls: ['./status-card.component.scss'],
+  template: `
+    <nb-card (click)="on = !on" [ngClass]="{'off': !on}">
+      <div class="icon-container">
+        <div class="icon {{ type }}">
+          <ng-content></ng-content>
+        </div>
+      </div>
+
+      <div class="details">
+        <div class="title">{{ title }}</div>
+        <div class="status">{{ on ? 'ON' : 'OFF' }}</div>
+      </div>
+    </nb-card>
+  `,
+})
+export class StatusCardComponent {
+
+  @Input() title: string;
+  @Input() type: string;
+  @Input() on = true;
+}