61 lines
2.4 KiB
TypeScript
61 lines
2.4 KiB
TypeScript
import { Component, Input, OnInit } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
|
|
@Component({
|
|
selector: 'app-notification',
|
|
standalone: true,
|
|
imports: [CommonModule],
|
|
template: `
|
|
@if (visible) {
|
|
<div class="fixed bottom-4 right-4 z-50 glass-panel ghost-border rounded-sm px-4 py-3 min-w-[300px] flex items-start gap-3 shadow-lg transition-all duration-300"
|
|
[ngClass]="type === 'error' ? 'border-red-500/50' : 'border-[var(--color-primary)]/50'">
|
|
|
|
<!-- Icon -->
|
|
<div [ngClass]="type === 'error' ? 'text-red-400' : 'text-[var(--color-primary)]'" class="mt-0.5">
|
|
@if (type === 'success') {
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
}
|
|
@if (type === 'error') {
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
}
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="flex-1">
|
|
<h4 class="text-[var(--color-on-surface)] font-inter font-medium text-sm m-0">{{ title }}</h4>
|
|
<p class="text-[var(--color-on-surface-variant)] font-inter text-sm m-0 mt-0.5">{{ message }}</p>
|
|
</div>
|
|
|
|
<!-- Close -->
|
|
<button (click)="close()" class="text-[var(--color-outline-variant)] hover:text-[var(--color-on-surface)] transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
}
|
|
`
|
|
})
|
|
export class NotificationComponent implements OnInit {
|
|
@Input() title = '';
|
|
@Input() message = '';
|
|
@Input() type: 'success' | 'error' = 'success';
|
|
@Input() duration = 5000;
|
|
|
|
visible = true;
|
|
|
|
ngOnInit() {
|
|
if (this.duration > 0) {
|
|
setTimeout(() => this.close(), this.duration);
|
|
}
|
|
}
|
|
|
|
close() {
|
|
this.visible = false;
|
|
}
|
|
}
|