1 files changed, 77 insertions, 0 deletions
diff --git a/assets/src/components/Toasts.svelte b/assets/src/components/Toasts.svelte
new file mode 100644
index 0000000..f909831
--- /dev/null
+++ b/assets/src/components/Toasts.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+    import { dismissToast, toasts, ToastType } from "../state/toast";
+    import { scale } from "svelte/transition";
+    import CloseIcon from "./icons/CloseIcon.svelte";
+    import FlashIcon from "./icons/FlashIcon.svelte";
+    import LightbulbIcon from "./icons/LightbulbIcon.svelte";
+
+    function trim(str: string) {
+        return str.slice(0, 100) + (str.length > 100 ? "..." : "");
+    }
+</script>
+
+<div class="toasts">
+    {#each $toasts as toast (toast.id)}
+        <ul class="toast" in:scale out:scale>
+            <div class="button" on:click={() => dismissToast(toast)}>
+                <CloseIcon color="white" />
+            </div>
+
+            <li>
+                {#if toast.type === ToastType.INFO}
+                    <LightbulbIcon color="white" />
+                {:else}
+                    <FlashIcon color="white" />
+                {/if}
+            </li>
+
+            {#if toast.title}
+                <li class="title">{toast.title}</li>
+            {/if}
+
+            <li class="message">{trim(toast.message)}</li>
+        </ul>
+    {/each}
+</div>
+
+<style>
+    .toasts {
+        position: fixed;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        z-index: 1;
+        flex-direction: column-reverse;
+    }
+
+    .toast {
+        width: 300px;
+        background-color: black;
+        border: solid 1px #626262;
+        padding: 17px 20px;
+        font-size: 12px;
+        line-height: 1.5rem;
+        position: relative;
+    }
+
+    .title {
+        font-size: 16px;
+    }
+
+    .message {
+        color: #626262;
+        font-size: 12px;
+        line-height: 1.2rem;
+        word-wrap: anywhere;
+    }
+
+    ul {
+        list-style-type: none;
+    }
+
+    .button {
+        position: absolute;
+        right: 20px;
+    }
+</style>