46 lines
2.5 KiB
PHP
46 lines
2.5 KiB
PHP
<div x-data="{
|
|
toasts: [],
|
|
addToast(message, type = 'success') {
|
|
let id = Date.now();
|
|
this.toasts.push({ id, message, type });
|
|
|
|
// Remove o toast após 3 segundos
|
|
setTimeout(() => this.removeToast(id), 7000);
|
|
},
|
|
removeToast(id) {
|
|
this.toasts = this.toasts.filter(toast => toast.id !== id);
|
|
}
|
|
}" @notify.window="addToast($event.detail.message, $event.detail.type || 'success')"
|
|
@notifyError.window="addToast($event.detail.message, $event.detail.type || 'error')"
|
|
class="fixed top-5 right-5 z-50 flex w-full max-w-xs flex-col space-y-3">
|
|
<template x-for="toast in toasts" :key="toast.id">
|
|
<div x-show="true" x-transition:enter="transform ease-out duration-300 transition"
|
|
x-transition:enter-start="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
|
|
x-transition:enter-end="translate-y-0 opacity-100 sm:translate-x-0"
|
|
x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0" class="toast-card"
|
|
:class="{ 'toast-success': toast.type === 'success', 'toast-error': toast.type === 'error' }">
|
|
<div x-show="toast.type === 'success'" class="toast-icon-success">
|
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<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>
|
|
</div>
|
|
<div x-show="toast.type === 'error'" class="toast-icon-error">
|
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
|
|
</svg>
|
|
</div>
|
|
|
|
<p class="toast-message" x-text="toast.message"></p>
|
|
|
|
<button @click="removeToast(toast.id)" class="toast-close-button">
|
|
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</div> |