mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 16:31:08 -05:00
91 lines
3.8 KiB
HTML
91 lines
3.8 KiB
HTML
{% comment %}
|
|
Toast Notification Container Component
|
|
Matches React frontend toast functionality with Sonner-like behavior
|
|
{% endcomment %}
|
|
|
|
<!-- Toast Container -->
|
|
<div
|
|
x-data="{}"
|
|
x-show="$store.toast.toasts.length > 0"
|
|
class="fixed top-4 right-4 z-50 space-y-2"
|
|
x-cloak
|
|
>
|
|
<template x-for="toast in $store.toast.toasts" :key="toast.id">
|
|
<div
|
|
x-show="toast.visible"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="transform opacity-0 translate-x-full"
|
|
x-transition:enter-end="transform opacity-100 translate-x-0"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="transform opacity-100 translate-x-0"
|
|
x-transition:leave-end="transform opacity-0 translate-x-full"
|
|
class="relative max-w-sm w-full bg-background border rounded-lg shadow-lg overflow-hidden"
|
|
:class="{
|
|
'border-green-200 bg-green-50 dark:bg-green-900/20 dark:border-green-800': toast.type === 'success',
|
|
'border-red-200 bg-red-50 dark:bg-red-900/20 dark:border-red-800': toast.type === 'error',
|
|
'border-yellow-200 bg-yellow-50 dark:bg-yellow-900/20 dark:border-yellow-800': toast.type === 'warning',
|
|
'border-blue-200 bg-blue-50 dark:bg-blue-900/20 dark:border-blue-800': toast.type === 'info'
|
|
}"
|
|
>
|
|
<!-- Progress Bar -->
|
|
<div
|
|
class="absolute top-0 left-0 h-1 bg-current opacity-30 transition-all duration-100 ease-linear"
|
|
:style="`width: ${toast.progress}%`"
|
|
:class="{
|
|
'text-green-500': toast.type === 'success',
|
|
'text-red-500': toast.type === 'error',
|
|
'text-yellow-500': toast.type === 'warning',
|
|
'text-blue-500': toast.type === 'info'
|
|
}"
|
|
></div>
|
|
|
|
<div class="p-4">
|
|
<div class="flex items-start">
|
|
<!-- Icon -->
|
|
<div class="flex-shrink-0 mr-3">
|
|
<i
|
|
class="w-5 h-5"
|
|
:class="{
|
|
'fas fa-check-circle text-green-500': toast.type === 'success',
|
|
'fas fa-exclamation-circle text-red-500': toast.type === 'error',
|
|
'fas fa-exclamation-triangle text-yellow-500': toast.type === 'warning',
|
|
'fas fa-info-circle text-blue-500': toast.type === 'info'
|
|
}"
|
|
></i>
|
|
</div>
|
|
|
|
<!-- Message -->
|
|
<div class="flex-1 min-w-0">
|
|
<p
|
|
class="text-sm font-medium"
|
|
:class="{
|
|
'text-green-800 dark:text-green-200': toast.type === 'success',
|
|
'text-red-800 dark:text-red-200': toast.type === 'error',
|
|
'text-yellow-800 dark:text-yellow-200': toast.type === 'warning',
|
|
'text-blue-800 dark:text-blue-200': toast.type === 'info'
|
|
}"
|
|
x-text="toast.message"
|
|
></p>
|
|
</div>
|
|
|
|
<!-- Close Button -->
|
|
<div class="flex-shrink-0 ml-3">
|
|
<button
|
|
@click="$store.toast.hide(toast.id)"
|
|
class="inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors"
|
|
:class="{
|
|
'text-green-500 hover:bg-green-100 focus:ring-green-500 dark:hover:bg-green-800': toast.type === 'success',
|
|
'text-red-500 hover:bg-red-100 focus:ring-red-500 dark:hover:bg-red-800': toast.type === 'error',
|
|
'text-yellow-500 hover:bg-yellow-100 focus:ring-yellow-500 dark:hover:bg-yellow-800': toast.type === 'warning',
|
|
'text-blue-500 hover:bg-blue-100 focus:ring-blue-500 dark:hover:bg-blue-800': toast.type === 'info'
|
|
}"
|
|
>
|
|
<i class="fas fa-times w-4 h-4"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|