progress

src/dashboard/components/FileUpload.svelte

@@ -1,35 +1,18 @@
 <script>
   let text = 'Select File'
 
-  export let value = undefined
-
+  export let file
   let input
-  let error
 
   function validate() {
     if (!input || !input.files.length) return
-
-    const file = input.files[0]
+    file = input.files[0]
     text = file.name
-
-    const reader = new FileReader()
-    reader.onload = (data) => {
-      try {
-        error = false
-        const text = data.target.result
-        const parsed = JSON.parse(text)
-        value = parsed
-      } catch {
-        error = true
-        value = undefined
-      }
-    }
-    reader.readAsText(file)
   }
 </script>
 
 <label class="btn">
-  {#if error}Invalid file{:else}{text}{/if}
+  {text}
   <input bind:this={input} on:change={validate} class="input" accept="application/json" type="file" />
 </label>
 

src/dashboard/components/Toast.svelte

@@ -0,0 +1,19 @@
+<script>
+  import { onMount } from 'svelte'
+  import { scale } from 'svelte/transition'
+
+  export let toast
+
+  let show = true
+  onMount(() => {
+    setTimeout(() => {
+      show = false
+    }, 3000)
+  })
+</script>
+
+{#if show}
+  <div class="toast toast-{toast.type}" transition:scale>
+    {toast.message}
+  </div>
+{/if}

src/dashboard/components/Toasts.svelte

@@ -0,0 +1,24 @@
+<script>
+  import { toasts } from '../toasts'
+  import Toast from './Toast.svelte'
+</script>
+
+<div class="wrapper">
+  {#each $toasts as toast}
+    <div class="mt-2">
+      <Toast {toast} />
+    </div>
+  {/each}
+</div>
+
+<style>
+  .wrapper {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    z-index: 100;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column-reverse;
+  }
+</style>