added user page and create a new modal from use with button and text

src/app/components/modal-button/modal-button.html

@@ -0,0 +1,16 @@
+<button nz-button nzType="primary" (click)="showModal()">{{name()}}</button>
+
+<ng-template #modalContent>
+    <ng-content></ng-content>
+</ng-template>
+
+<nz-modal
+        [(nzVisible)]="isVisible"
+        [nzTitle]="name()"
+        (nzOnCancel)="handleCancel()"
+        (nzOnOk)="handleOk()"
+        [nzOkLoading]="isOkLoading"
+        [nzContent]="modalContent"
+>
+</nz-modal>
+

src/app/components/modal-button/modal-button.ts

@@ -0,0 +1,37 @@
+import {Component, input, Input} from '@angular/core';
+import {NzIconDirective} from "ng-zorro-antd/icon";
+import {NzModalComponent} from "ng-zorro-antd/modal";
+import {NzButtonComponent} from "ng-zorro-antd/button";
+
+@Component({
+  selector: 'app-modal-button',
+    imports: [
+        NzModalComponent,
+        NzButtonComponent,
+    ],
+  templateUrl: './modal-button.html',
+  styleUrl: './modal-button.css',
+})
+
+export class ModalButton {
+    name = input.required<string>()
+
+    isVisible = false;
+    isOkLoading = false;
+
+    showModal(): void {
+        this.isVisible = true;
+    }
+
+    handleOk(): void {
+        this.isOkLoading = true;
+        setTimeout(() => {
+            this.isVisible = false;
+            this.isOkLoading = false;
+        }, 1000);
+    }
+
+    handleCancel(): void {
+        this.isVisible = false;
+    }
+}