LukiBeg
/
Nexus-InglineSystems
mirror of https://github.com/Lukibeg/Nexus-InglineSystems.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: Exibe flash messages após alguma ação.

This commit is contained in:
lukibeg 2025-11-08 19:57:45 -03:00
parent 1996a7c33b
commit bb782575fa
1 changed files with 46 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
resources/views/components/flash-messages.blade.php Normal file
View File

@ -0,0 +1,46 @@
<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>