From b00ce237926a25a75433c4031835b32436aa0db8 Mon Sep 17 00:00:00 2001
From: Timothy Alcaide <timothy.alcaide@gmail.com>
Date: Wed, 10 Apr 2024 14:29:39 +0200
Subject: [PATCH] refactor: add dialog content

---
 .../src/app/ui/dialog.component.ts            | 30 +++++++++++++++++++
 .../src/app/ui/nav.component.ts               | 14 ++++-----
 .../angular/48-dialog-alert-form.md           | 12 +++-----
 3 files changed, 41 insertions(+), 15 deletions(-)
 create mode 100644 apps/angular/dialog-alert-form/src/app/ui/dialog.component.ts

diff --git a/apps/angular/dialog-alert-form/src/app/ui/dialog.component.ts b/apps/angular/dialog-alert-form/src/app/ui/dialog.component.ts
new file mode 100644
index 0000000..661da9b
--- /dev/null
+++ b/apps/angular/dialog-alert-form/src/app/ui/dialog.component.ts
@@ -0,0 +1,30 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+// NOTE : this is just the dialog content, you need to implement dialog logic
+
+@Component({
+  standalone: true,
+  template: `
+    <div role="alert" class="rounded-xl border border-gray-100 bg-white p-5">
+      <h3 class="block text-xl font-medium text-red-600">
+        You have unsaved information!
+      </h3>
+
+      <p class="mt-1 text-gray-700">Do you want to continue and lose them?</p>
+
+      <div class="mt-4 flex gap-2">
+        <button
+          class="inline-flex items-center gap-2 rounded-lg bg-red-600 px-4 py-2 text-white hover:bg-red-700">
+          Yes continue
+        </button>
+
+        <button
+          class="block rounded-lg px-4 py-2 text-gray-700 transition hover:bg-gray-50">
+          Stay on page
+        </button>
+      </div>
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AlertDialogComponent {}
diff --git a/apps/angular/dialog-alert-form/src/app/ui/nav.component.ts b/apps/angular/dialog-alert-form/src/app/ui/nav.component.ts
index 39c0d76..491aeca 100644
--- a/apps/angular/dialog-alert-form/src/app/ui/nav.component.ts
+++ b/apps/angular/dialog-alert-form/src/app/ui/nav.component.ts
@@ -7,23 +7,23 @@ import { RouterLink, RouterLinkActive } from '@angular/router';
   imports: [RouterLink, RouterLinkActive],
   template: `
     <nav
-      class="inline-flex -space-x-px overflow-hidden rounded-md border bg-white shadow-sm">
+      class="inline-flex overflow-hidden rounded-md border bg-white shadow-sm">
       <a
         routerLink="/form"
-        routerLinkActive="bg-gray-900 text-gray-50 hover:bg-none"
-        class="inline-block px-4 py-2 text-sm font-medium text-gray-700   focus:relative">
+        routerLinkActive="bg-gray-300 hover:bg-gray-300"
+        class="inline-block px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100  focus:relative">
         Form
       </a>
       <a
         routerLink="/page-1"
-        routerLinkActive="bg-gray-900 text-gray-50 hover:bg-none"
-        class="inline-block px-4 py-2 text-sm font-medium text-gray-700   focus:relative">
+        routerLinkActive="bg-gray-300 hover:bg-gray-300"
+        class="inline-block px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100  focus:relative">
         Page 1
       </a>
       <a
         routerLink="/page-2"
-        routerLinkActive="bg-gray-900 text-gray-50 hover:bg-none"
-        class="inline-block px-4 py-2 text-sm font-medium text-gray-700   focus:relative">
+        routerLinkActive="bg-gray-300 hover:bg-gray-300"
+        class="inline-block px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100  focus:relative">
         Page 2
       </a>
     </nav>
diff --git a/docs/src/content/docs/challenges/angular/48-dialog-alert-form.md b/docs/src/content/docs/challenges/angular/48-dialog-alert-form.md
index 8a66b90..ec8ab85 100644
--- a/docs/src/content/docs/challenges/angular/48-dialog-alert-form.md
+++ b/docs/src/content/docs/challenges/angular/48-dialog-alert-form.md
@@ -32,17 +32,13 @@ Here's the feature expressed as a user story (functional expectation)
 - If the input text has been pre-filled, then an alert dialog box opens.
 - Otherwise, the user navigates normally.
 
-2. The alert dialog box must be clear and concise, stating: "Caution! You have unsaved information. Do you want to continue and lose them?" with the following button labels:
-
-- Continue without saving
-- Stay on page
-
+2. The content of dialog.component.ts must be use for your dialog box content
 3. The appearance and behavior of the alert dialog box must comply with W3C conventions, see [alert dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/)
 4. Maximize the use of the new concepts and syntax in the latest version of Angular.
-5. (Bonus) : Try to adopt a declarative approach (for dialog opening, for example).
 
 <details>
     <summary>Tips 🤫 (if you really need it and after careful consideration)</summary>
-    Use the Material CDK Dialog - https://material.angular.io/cdk/dialog/overview
-    Use the CanDeactivate guard - https://angular.io/api/router/CanDeactivate (use new functionnal approach).
+    - Use the Material CDK Dialog or Overlay - https://material.angular.io/cdk/ (dont forget to add @import '@angular/cdk/overlay-prebuilt.css' in style.sccss)
+    <br>
+    - Use the CanDeactivate guard - https://angular.io/api/router/CanDeactivate (use new functionnal approach).
 </details>