diff options
Diffstat (limited to 'ping/frontend/src/lib/components/ToastList.svelte')
| -rw-r--r-- | ping/frontend/src/lib/components/ToastList.svelte | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/ping/frontend/src/lib/components/ToastList.svelte b/ping/frontend/src/lib/components/ToastList.svelte new file mode 100644 index 0000000..5351ef7 --- /dev/null +++ b/ping/frontend/src/lib/components/ToastList.svelte @@ -0,0 +1,67 @@ +<script lang="ts"> + import { toastList } from '$lib/stores/toast'; +</script> + +<div class="toast"> + {#each $toastList as toast} + <div class="toast-item" style="border-top: 4px {toast.color} solid"> + <h3 style="color: {toast.color}">{toast.title}</h3> + <p>{toast.message}</p> + </div> + {/each} +</div> + +<style> + .toast { + position: fixed; + bottom: 20px; + right: 20px; + z-index: 1000; + display: flex; + flex-direction: column; + gap: 10px; + } + + .toast-item { + background-color: var(--bg-secondary); + padding: 10px; + color: white; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + transition: + transform 0.3s, + opacity 0.3s; + transform: translateY(30px); + opacity: 0; + animation-delay: 0s, 4.7s; + animation-name: toast-in, toast-out; + animation-duration: 0.3s, 0.3s; + animation-fill-mode: forwards, forwards; + } + + @keyframes toast-in { + from { + transform: translateY(30px); + opacity: 0; + } + to { + transform: translateY(0); + opacity: 1; + } + } + + @keyframes toast-out { + from { + transform: translateY(0); + opacity: 1; + } + to { + transform: translateY(30px); + opacity: 0; + } + } + + .toast-item h3 { + margin: 0; + font-weight: bold; + } +</style> |