feat: create challenge 48 without solution

apps/angular/dialog-alert-form/src/app/ui/form.component.ts

@@ -0,0 +1,62 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-form',
+  standalone: true,
+  template: `
+    <form class="space-y-4">
+      <div>
+        <label class="sr-only" for="name">Name</label>
+        <input
+          class="w-full rounded-lg border-gray-200 p-3 text-sm"
+          placeholder="Name"
+          type="text"
+          name="name"
+          id="name" />
+      </div>
+
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <div>
+          <label class="sr-only" for="email">Email</label>
+          <input
+            class="w-full rounded-lg border-gray-200 p-3 text-sm"
+            placeholder="Email address"
+            type="email"
+            name="email"
+            id="email" />
+        </div>
+
+        <div>
+          <label class="sr-only" for="phone">Phone</label>
+          <input
+            class="w-full rounded-lg border-gray-200 p-3 text-sm"
+            placeholder="Phone Number"
+            type="tel"
+            name="phone"
+            id="phone" />
+        </div>
+      </div>
+
+      <div>
+        <label class="sr-only" for="message">Message</label>
+
+        <textarea
+          class="w-full rounded-lg border-gray-200 p-3 text-sm"
+          placeholder="Message"
+          rows="8"
+          name="message"
+          id="message"></textarea>
+      </div>
+
+      <div class="mt-4">
+        <button
+          type="submit"
+          class="inline-block w-full rounded-lg border bg-gray-50 px-5 py-3 font-medium text-gray-900 sm:w-auto">
+          Submit
+        </button>
+      </div>
+    </form>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormComponent {}

apps/angular/dialog-alert-form/src/app/ui/nav.component.ts

@@ -0,0 +1,33 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+  selector: 'app-nav',
+  standalone: true,
+  imports: [RouterLink, RouterLinkActive],
+  template: `
+    <nav
+      class="inline-flex -space-x-px 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">
+        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">
+        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">
+        Page 2
+      </a>
+    </nav>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NavComponent {}