src/lib/components/Toast.svelte (view raw)
1<script lang="ts">
2 import { removeToast, type Toast } from "../store/toastStore";
3
4 const TOAST_TIME = 4000;
5
6 let { toast }: { toast: Toast } = $props();
7
8 setTimeout(() => {
9 removeToast(toast.id);
10 }, TOAST_TIME);
11
12 const colorNames = {
13 info: "alert-info",
14 error: "alert-error",
15 success: "alert-success",
16 warning: "alert-warning",
17 };
18</script>
19
20<button
21 class={`alert ${colorNames[toast.type]} min-w-40`}
22 onclick={() => removeToast(toast.id)}
23>
24 <span>{toast.message}</span>
25</button>