feat: add notification component

src/app/components/notification/notification.html

@@ -0,0 +1,9 @@
+@if(notification$(); as notification) {
+    <div class="notification notification--{{notification.type}} notification--fade-in-out">
+        <p>{{ notification.message  }}</p>
+    </div>
+}
+
+
+
+

src/app/components/notification/notification.scss

@@ -0,0 +1,43 @@
+@keyframes fade-in-out {
+  0% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.notification {
+  p {
+    margin: 0;
+  }
+  -moz-box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.7);
+  -webkit-box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.7);
+  border-radius: 10px;
+  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
+  padding: 1rem 3rem;
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+  z-index: 999;
+
+  &--fade-in-out {
+    animation: fade-in-out 0.8s ease-in-out forwards;
+  }
+
+  &--success {
+    background-color: rgb(179, 241, 117);
+    color: green;
+  }
+
+  &--error {
+    background-color: rgb(238, 148, 166);
+    color: rgb(163, 0, 33);
+  }
+}

src/app/components/notification/notification.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Notification } from './notification';
+
+describe('Notification', () => {
+  let component: Notification;
+  let fixture: ComponentFixture<Notification>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Notification],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Notification);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/notification/notification.ts

@@ -0,0 +1,13 @@
+import { Component, inject } from '@angular/core';
+import { Notifier } from '../../services/notifier';
+
+@Component({
+  selector: 'app-notification',
+  imports: [],
+  templateUrl: './notification.html',
+  styleUrl: './notification.scss',
+})
+export class Notification {
+  private readonly notificationService = inject(Notifier);
+  protected readonly notification$ = this.notificationService.notification$;
+}