42 lines
2.7 KiB
PHP
42 lines
2.7 KiB
PHP
<div x-data class="fixed bottom-4 right-4 z-50 flex flex-col-reverse gap-3 max-w-sm w-full pointer-events-none">
|
|
<template x-for="(notification, index) in $store.notifications.notifications" :key="notification.id">
|
|
<div x-show="notification.show"
|
|
x-transition:enter="transition ease-out duration-300 transform"
|
|
x-transition:enter-start="opacity-0 translate-x-full scale-95"
|
|
x-transition:enter-end="opacity-100 translate-x-0 scale-100"
|
|
x-transition:leave="transition ease-in duration-200 transform"
|
|
x-transition:leave-start="opacity-100 translate-x-0 scale-100"
|
|
x-transition:leave-end="opacity-0 translate-x-full scale-95"
|
|
:class="notification.type === 'success' ? 'bg-success border-success/50' : 'bg-error border-error/50'"
|
|
class="relative flex flex-col text-white rounded-xl shadow-lg border backdrop-blur-sm pointer-events-auto overflow-hidden">
|
|
<div class="flex items-center justify-between gap-3 px-4 py-3">
|
|
<div class="flex items-center gap-3">
|
|
<template x-if="notification.type === 'success'">
|
|
<svg class="size-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
|
|
</template>
|
|
<template x-if="notification.type !== 'success'">
|
|
<svg class="size-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
|
|
</template>
|
|
<p x-text="notification.message" class="text-sm font-medium"></p>
|
|
</div>
|
|
<button @click="$store.notifications.removeNotification(notification.id)" class="text-white/70 hover:text-white transition-colors p-1 rounded-full hover:bg-white/10">
|
|
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
|
|
</button>
|
|
</div>
|
|
{{-- Auto-dismiss countdown progress bar --}}
|
|
<div class="h-1 bg-white/20">
|
|
<div class="h-full bg-white/50 notification-progress"
|
|
:class="notification.type === 'success' ? 'bg-white/60' : 'bg-white/60'"
|
|
style="animation: notification-countdown 5s linear forwards;"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes notification-countdown {
|
|
from { width: 100%; }
|
|
to { width: 0%; }
|
|
}
|
|
</style>
|