vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-10 04:43:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

refactor: add dialog content

Browse Source
This commit is contained in:
Timothy Alcaide
2024-04-10 14:29:39 +02:00
committed by thomas
parent 25004e7678
commit b00ce23792
3 changed files with 41 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
apps/angular/dialog-alert-form/src/app/ui/dialog.component.ts Normal file
View File

@@ -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 {}

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

@@ -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>