feat: add notification

src/components/notification/notification.component.css

@@ -0,0 +1,10 @@
+.notification-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 5px;
+}
+
+.close-button {
+  margin-left: 8px;
+}

src/components/notification/notification.component.html

@@ -0,0 +1,11 @@
+<div class="notification-content" [class]="data.className">
+  <span>
+    {{ data.message }}
+    </span>
+  <button mat-icon-button class="close-button" (click)="dismiss()">
+    <mat-icon>close</mat-icon>
+  </button>
+</div>
+@if (showProgressBar) {
+  <mat-progress-bar mode="determinate" [value]="progress"></mat-progress-bar>
+}

src/components/notification/notification.component.ts

@@ -0,0 +1,46 @@
+import {Component, Inject} from '@angular/core';
+import {MatIcon} from "@angular/material/icon";
+import {MatProgressBar} from "@angular/material/progress-bar";
+import {MAT_SNACK_BAR_DATA, MatSnackBarRef} from "@angular/material/snack-bar";
+import {MatIconButton} from "@angular/material/button";
+
+@Component({
+  selector: 'app-notification',
+  standalone: true,
+  imports: [
+    MatIconButton,
+    MatIcon,
+    MatProgressBar
+  ],
+  templateUrl: './notification.component.html',
+  styleUrl: './notification.component.css'
+})
+
+export class NotificationComponent {
+  showProgressBar: boolean = false;
+  progress: number = 100;
+
+  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any, private snackBarRef: MatSnackBarRef<NotificationComponent>) {
+    if (data.duration) {
+      this.startProgress(data.duration);
+      this.showProgressBar = true;
+    }
+  }
+
+  dismiss(): void {
+    this.snackBarRef.dismiss();
+  }
+
+  private startProgress(duration: number): void {
+    const interval: number = duration / 100;
+    const progressInterval: number = setInterval(() => {
+      this.progress--;
+      if (this.progress === 0) {
+        clearInterval(progressInterval);
+        setTimeout(() => {
+          this.dismiss();
+        }, 1000);
+      }
+    }, interval);
+  }
+}