3 files changed, 101 insertions, 0 deletions
diff --git a/ufund-ui/src/app/components/toast/toast.component.css b/ufund-ui/src/app/components/toast/toast.component.css
new file mode 100644
index 0000000..4cd81fe
--- /dev/null
+++ b/ufund-ui/src/app/components/toast/toast.component.css
@@ -0,0 +1,57 @@
+:host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@keyframes slideDown {
+    from {transform: translateY(-90px);}
+    to {transform: translateY(0);}
+}
+
+.toast {
+    /*transform: translateY(-90px);*/
+    animation: slideDown .5s ease-in-out;
+    transition: transform .5s;
+    align-self: center;
+    z-index: 3;
+    position: absolute;
+    top: 15px;
+    display: flex;
+    flex-direction: row;
+    padding: 3px 15px;
+    background-color: #3a3a3a;
+    border-radius: 100000px;
+    gap: 10px;
+    align-items: center;
+
+    button {
+        aspect-ratio: 1/1;
+        margin-right: -11px;
+        padding: 8px;
+        display: flex;
+        align-items: center;
+        background-color: transparent;
+    }
+
+    button:hover {
+        background-color: rgba(255, 255, 255, 0.1);
+    }
+}
+
+.toast.hide {
+    transform: translateY(-90px);
+}
+
+.toast.warning {
+    background-color: #ffc500;
+    color: black;
+
+    button {
+        color: black;
+    }
+}
+
+.toast.error {
+    background-color: #d81a1a;
+}
diff --git a/ufund-ui/src/app/components/toast/toast.component.html b/ufund-ui/src/app/components/toast/toast.component.html
new file mode 100644
index 0000000..dccf869
--- /dev/null
+++ b/ufund-ui/src/app/components/toast/toast.component.html
@@ -0,0 +1,7 @@
+<div class="toast" [ngClass]="ToastType[type].toLowerCase()" #toastDiv>
+    <span>{{this.message}}</span>
+    <a *ngIf="this.action" (click)="this.action.onAction()">{{this.action.label}}</a>
+    <button (click)="hide()">
+        <span class="icon">close</span>
+    </button>
+</div>
diff --git a/ufund-ui/src/app/components/toast/toast.component.ts b/ufund-ui/src/app/components/toast/toast.component.ts
new file mode 100644
index 0000000..47fd7ff
--- /dev/null
+++ b/ufund-ui/src/app/components/toast/toast.component.ts
@@ -0,0 +1,37 @@
+import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
+import {ToastType} from '../../services/toasts.service';
+
+@Component({
+  selector: 'app-toast',
+  standalone: false,
+  templateUrl: './toast.component.html',
+  styleUrl: './toast.component.css'
+})
+export class ToastComponent implements OnInit{
+    @Input() type!: ToastType
+    @Input() message!: string
+    @Input() action?: {label: string, onAction: () => void}
+
+    @ViewChild("toastDiv") toastDiv!: ElementRef<HTMLDivElement>
+
+    ngOnInit() {
+        setTimeout(() => {
+            this.hide();
+        }, 3000)
+    }
+
+    hide() {
+        console.log(this.toastDiv, typeof this.toastDiv)
+        this.toastDiv.nativeElement.classList.add('hide')
+    }
+
+    getColor() {
+        switch (this.type) {
+            case ToastType.ERROR: return "red";
+            case ToastType.INFO: return "";
+            case ToastType.WARNING: return "yellow";
+        }
+    }
+
+    protected readonly ToastType = ToastType;
+}