feat: notification component

apps/NwaifuAnime/src/app/components/notification/notification.component.ts

@@ -0,0 +1,53 @@
+import { CommonModule } from "@angular/common";
+import { AfterViewInit, Component, OnDestroy } from "@angular/core";
+import { Subject, takeUntil } from "rxjs";
+import { INotification } from "../../services/notification/notification.dto";
+import { NotificationService } from "../../services/notification/notification.service";
+
+@Component({
+  standalone: true,
+  selector: "app-notification",
+  templateUrl: "./notification.component.html",
+  styleUrls: ["./notification.component.less"],
+  imports: [CommonModule],
+})
+export class NotificationComponent implements AfterViewInit, OnDestroy {
+  show_notification = false;
+  isError = false;
+  private closeNotificationTimer: ReturnType<typeof setTimeout> | null = null;
+  notification: INotification = { isError: false, message: "", name: "", time: 0 };
+
+  private destroy$ = new Subject<void>();
+
+  constructor(private notificationService: NotificationService) {}
+
+  ngAfterViewInit(): void {
+    this.notificationService.notification$
+      .asObservable()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((data) => {
+        if (!data) return;
+        this.notification = data;
+        this.show_notification = true;
+        if (this.closeNotificationTimer) {
+          clearTimeout(this.closeNotificationTimer);
+        }
+        this.closeNotificationTimer = setTimeout(() => {
+          this.show_notification = false;
+        }, data.time);
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  closeNotification() {
+    this.show_notification = false;
+  }
+
+  get borderColor(): string {
+    return this.notification.isError ? "border-red-600" : "border-green-600";
+  }
+}