...

src/lib/components/toast/ToastProvider.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { toast, toasts } from '$lib/components/toast/toast';
+	import { fade } from 'svelte/transition';
+	import InfoIcon from '../icons/severity/InfoIcon.svelte';
+	import WarningIcon from '../icons/severity/WarningIcon.svelte';
+	import ErrorIcon from '../icons/severity/ErrorIcon.svelte';
+	import SuccessIcon from '../icons/severity/SuccessIcon.svelte';
+</script>
+
+{#if $toasts.length >= 1}
+	<div class="fixed bottom-0 right-0 z-50 flex w-full flex-col gap-2 p-4 text-white sm:w-96">
+		{#each $toasts as toastItem}
+			<div
+				class:bg-red-500={toastItem.type === 'error'}
+				class:bg-green-500={toastItem.type === 'success'}
+				class:bg-orange-500={toastItem.type === 'warning'}
+				class:bg-blue-500={toastItem.type === 'info'}
+				class="card flex items-center gap-3 border-contrast-900 px-4 py-3 shadow-md dark:border-contrast-100"
+				transition:fade={{ duration: 200 }}
+			>
+				<div
+					class:text-red-900={toastItem.type === 'error'}
+					class:text-green-900={toastItem.type === 'success'}
+					class:text-orange-900={toastItem.type === 'warning'}
+					class:text-blue-900={toastItem.type === 'info'}
+					class="shrink-0"
+				>
+					{#if toastItem.type === 'info'}
+						<InfoIcon class="w-7"></InfoIcon>
+					{:else if toastItem.type === 'warning'}
+						<WarningIcon class="w-7"></WarningIcon>
+					{:else if toastItem.type === 'error'}
+						<ErrorIcon class="w-7"></ErrorIcon>
+					{:else if toastItem.type === 'success'}
+						<SuccessIcon class="w-7"></SuccessIcon>
+					{/if}
+				</div>
+
+				<p class="grow">
+					{toastItem.text}
+				</p>
+
+				<button on:click={() => toast.dismiss(toastItem.id)} class="shrink-0">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						class="w-6"
+					>
+						<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+					</svg>
+				</button>
+			</div>
+		{/each}
+	</div>
+{/if}