{
// console.log('here');
// console.log(t);
clearTimeout(t);
t = null;
// console.log(t);
show = true;
message = event.detail.message;
type = event.detail.type;
console.log('show', show);
t = setTimeout(() => show = false, 5000)
}"
@resetAlert.window="(event) => {
show = false;
message = '';
type = '';
}"
x-show="show" x-description="Notification panel, show/hide based on alert state."
x-transition:enter="transform ease-out duration-500 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-700" x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0" style="display: none"
x-on:success.window="show = true; message = $event.detail.message; setTimeout(() => { show = false }, $event.detail.duration ?? 2500)"
:class="{ 'bg-green-700': type === 'success', 'bg-red-700': type === 'error', 'bg-yellow-700': type === 'warning' }"
class="max-w-sm w-full shadow-lg rounded-lg pointer-events-auto">