From 11adb55d1e10b0156b137c9eacc93e6031e58893 Mon Sep 17 00:00:00 2001
From: Meisterlala <6453306+Meisterlala@users.noreply.github.com>
Date: Tue, 19 Aug 2025 23:32:18 +0200
Subject: [PATCH] Refaktor

---
 04-dashboard/src/app/app.component.html       | 22 ++++++++++++++-----
 04-dashboard/src/app/app.component.ts         |  2 ++
 .../dashboard-item.component.css              |  0
 .../dashboard-item.component.html             |  9 ++++++++
 .../dashboard-item.component.ts               | 15 +++++++++++++
 .../server-status.component.html              |  4 ----
 .../dashboard/tickets/tickets.component.html  |  4 ----
 .../dashboard/tickets/tickets.component.ts    |  6 ++---
 .../dashboard/traffic/traffic.component.html  |  4 ----
 9 files changed, 44 insertions(+), 22 deletions(-)
 create mode 100644 04-dashboard/src/app/dashboard/dashboard-item/dashboard-item.component.css
 create mode 100644 04-dashboard/src/app/dashboard/dashboard-item/dashboard-item.component.html
 create mode 100644 04-dashboard/src/app/dashboard/dashboard-item/dashboard-item.component.ts

diff --git a/04-dashboard/src/app/app.component.html b/04-dashboard/src/app/app.component.html
index a0f4523..9ad4ea4 100644
--- a/04-dashboard/src/app/app.component.html
+++ b/04-dashboard/src/app/app.component.html
@@ -1,15 +1,25 @@
 <app-header />
 <main>
   <div id="dashboard">
-    <div class="dashboard-item"></div>
-    <app-server-status />
+    <app-dashboard-item
+      [image]="{ src: 'status.png', alt: 'A signal symbol' }"
+      title="Server Status"
+    >
+      <app-server-status />
+    </app-dashboard-item>
 
-    <div class="dashboard-item">
+    <app-dashboard-item
+      [image]="{ src: 'globe.png', alt: 'A globe' }"
+      title="Traffic"
+    >
       <app-traffic />
-    </div>
+    </app-dashboard-item>
 
-    <div class="dashboard-item">
+    <app-dashboard-item
+      [image]="{ src: 'list.png', alt: 'A list of item' }"
+      title="Support Ticktes"
+    >
       <app-tickets />
-    </div>
+    </app-dashboard-item>
   </div>
 </main>
diff --git a/04-dashboard/src/app/app.component.ts b/04-dashboard/src/app/app.component.ts
index b53e176..37cbf7b 100644
--- a/04-dashboard/src/app/app.component.ts
+++ b/04-dashboard/src/app/app.component.ts
@@ -3,6 +3,7 @@ import { HeaderComponent } from './header/header.component';
 import { ServerStatusComponent } from './dashboard/server-status/server-status.component';
 import { TrafficComponent } from './dashboard/traffic/traffic.component';
 import { TicketsComponent } from './dashboard/tickets/tickets.component';
+import { DashboardItemComponent } from './dashboard/dashboard-item/dashboard-item.component';
 
 @Component({
   selector: 'app-root',
@@ -13,6 +14,7 @@ import { TicketsComponent } from './dashboard/tickets/tickets.component';
     ServerStatusComponent,
     TrafficComponent,
     TicketsComponent,
+    DashboardItemComponent,
   ],
 })
 export class AppComponent {}
diff --git a/04-dashboard/src/app/dashboard/dashboard-item/dashboard-item.component.css b/04-dashboard/src/app/dashboard/dashboard-item/dashboard-item.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/04-dashboard/src/app/dashboard/dashboard-item/dashboard-item.component.html b/04-dashboard/src/app/dashboard/dashboard-item/dashboard-item.component.html
new file mode 100644
index 0000000..9ba5b56
--- /dev/null
+++ b/04-dashboard/src/app/dashboard/dashboard-item/dashboard-item.component.html
@@ -0,0 +1,9 @@
+<div class="dashboard-item">
+  <article>
+    <header>
+      <img [src]="image.src" [alt]="image.alt" />
+      <h2>{{ title() }}</h2>
+    </header>
+    <ng-content />
+  </article>
+</div>
diff --git a/04-dashboard/src/app/dashboard/dashboard-item/dashboard-item.component.ts b/04-dashboard/src/app/dashboard/dashboard-item/dashboard-item.component.ts
new file mode 100644
index 0000000..f2cd7de
--- /dev/null
+++ b/04-dashboard/src/app/dashboard/dashboard-item/dashboard-item.component.ts
@@ -0,0 +1,15 @@
+import { Component, Input, input } from '@angular/core';
+
+@Component({
+  selector: 'app-dashboard-item',
+  standalone: true,
+  imports: [],
+  templateUrl: './dashboard-item.component.html',
+  styleUrl: './dashboard-item.component.css',
+})
+export class DashboardItemComponent {
+  @Input({ required: true }) image!: { src: string; alt: string };
+
+  // "new" way to request an input
+  title = input.required<string>();
+}
diff --git a/04-dashboard/src/app/dashboard/server-status/server-status.component.html b/04-dashboard/src/app/dashboard/server-status/server-status.component.html
index 27b990d..d32f3ed 100644
--- a/04-dashboard/src/app/dashboard/server-status/server-status.component.html
+++ b/04-dashboard/src/app/dashboard/server-status/server-status.component.html
@@ -1,8 +1,4 @@
 <article>
-  <header>
-    <img src="status.png" alt="A signal symbol" />
-    <h2>Server Status</h2>
-  </header>
   <div>
     @if (currentStatus === "online") {
       <p>Servers are online</p>
diff --git a/04-dashboard/src/app/dashboard/tickets/tickets.component.html b/04-dashboard/src/app/dashboard/tickets/tickets.component.html
index e1d321d..51146fe 100644
--- a/04-dashboard/src/app/dashboard/tickets/tickets.component.html
+++ b/04-dashboard/src/app/dashboard/tickets/tickets.component.html
@@ -1,8 +1,4 @@
 <article>
-  <header>
-    <img src="list.png" alt="A list of items" />
-    <h2>Support Tickets</h2>
-  </header>
   <div id="status">
     <p>Todo...</p>
   </div>
diff --git a/04-dashboard/src/app/dashboard/tickets/tickets.component.ts b/04-dashboard/src/app/dashboard/tickets/tickets.component.ts
index fa1ec0f..3dd0b2d 100644
--- a/04-dashboard/src/app/dashboard/tickets/tickets.component.ts
+++ b/04-dashboard/src/app/dashboard/tickets/tickets.component.ts
@@ -5,8 +5,6 @@ import { Component } from '@angular/core';
   standalone: true,
   imports: [],
   templateUrl: './tickets.component.html',
-  styleUrl: './tickets.component.css'
+  styleUrl: './tickets.component.css',
 })
-export class TicketsComponent {
-
-}
+export class TicketsComponent {}
diff --git a/04-dashboard/src/app/dashboard/traffic/traffic.component.html b/04-dashboard/src/app/dashboard/traffic/traffic.component.html
index ccab4c6..013c347 100644
--- a/04-dashboard/src/app/dashboard/traffic/traffic.component.html
+++ b/04-dashboard/src/app/dashboard/traffic/traffic.component.html
@@ -1,8 +1,4 @@
 <article>
-  <header>
-    <img src="globe.png" alt="A globe" />
-    <h2>Traffic</h2>
-  </header>
   <div id="traffic">
     <p>Last 7 days</p>
 
-- 
2.51.2