32 lines
854 B
Svelte
Executable File
32 lines
854 B
Svelte
Executable File
<!-- [DEF:Toast:Component] -->
|
|
<!--
|
|
@SEMANTICS: toast, notification, feedback, ui
|
|
@PURPOSE: Displays transient notifications (toasts) in the bottom-right corner.
|
|
@LAYER: UI
|
|
@RELATION: DEPENDS_ON -> frontend/src/lib/toasts.js
|
|
|
|
@PROPS: None
|
|
@EVENTS: None
|
|
-->
|
|
<script>
|
|
// [SECTION: IMPORTS]
|
|
import { toasts } from '../lib/toasts.js';
|
|
// [/SECTION]
|
|
</script>
|
|
|
|
<!-- [SECTION: TEMPLATE] -->
|
|
<div class="fixed bottom-0 right-0 p-4 space-y-2">
|
|
{#each $toasts as toast (toast.id)}
|
|
<div class="p-4 rounded-md shadow-lg text-white
|
|
{toast.type === 'info' && 'bg-blue-500'}
|
|
{toast.type === 'success' && 'bg-green-500'}
|
|
{toast.type === 'error' && 'bg-red-500'}
|
|
">
|
|
{toast.message}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
<!-- [/SECTION] -->
|
|
|
|
<!-- [/DEF:Toast] -->
|