Auto show course w/invite + Fix saving

src/components/Snackbar/constants.js

@@ -0,0 +1,13 @@
+export const SNACKBAR_SEVERITY = {
+  ERROR: 'ERROR',
+  WARNING: 'WARNING',
+  INFO: 'INFO',
+  SUCCESS: 'SUCCESS',
+};
+
+export const SNACKBAR_SEVERITY_COLOR = {
+  ERROR: 'bg-red-600',
+  WARNING: 'bg-yellow-600',
+  INFO: 'bg-blue-600',
+  SUCCESS: 'bg-green-600',
+};

src/components/Snackbar/index.svelte

@@ -0,0 +1,68 @@
+<script>
+  import { fly } from 'svelte/transition';
+  import Information24 from 'carbon-icons-svelte/lib/Information24';
+  import Warning24 from 'carbon-icons-svelte/lib/Warning24';
+  import CheckmarkOutline24 from 'carbon-icons-svelte/lib/CheckmarkOutline24';
+
+  import CloseButton from '../Buttons/Close/index.svelte';
+  import { SNACKBAR_SEVERITY, SNACKBAR_SEVERITY_COLOR } from './constants';
+  import { snackbarStore } from './store';
+
+  let severityColor = SNACKBAR_SEVERITY_COLOR[$snackbarStore.severity];
+
+  function handleClose() {
+    if (typeof $snackbarStore.handleClose === 'number') {
+      $snackbarStore.handleClose();
+    }
+
+    $snackbarStore.open = false;
+  }
+
+  // When open is true trigger autoHideDuration
+  function handleOpen(open) {
+    if (!open) {
+      return;
+    }
+
+    const { autoHideDuration } = $snackbarStore;
+
+    if (typeof autoHideDuration === 'number') {
+      setTimeout(handleClose, autoHideDuration);
+    }
+  }
+
+  $: handleOpen($snackbarStore.open);
+</script>
+
+{#if $snackbarStore.open}
+  <div
+    transition:fly={{ y: 200, duration: 1000 }}
+    class="root text-white rounded-md flex justify-between items-center z-50 absolute {severityColor}"
+  >
+    <div class="flex items-center">
+      {#if $snackbarStore.severity === SNACKBAR_SEVERITY.SUCCESS}
+        <CheckmarkOutline24 class="carbon-icon" />
+      {:else if $snackbarStore.severity === SNACKBAR_SEVERITY.WARNING}
+        <Warning24 class="carbon-icon" />
+      {:else}
+        <Information24 class="carbon-icon" />
+      {/if}
+      <p class="ml-2 text-lg">{$snackbarStore.message}</p>
+    </div>
+
+    <CloseButton onClick={handleClose} contained={true} color="text-white" />
+  </div>
+{/if}
+
+<style>
+  .root {
+    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+    left: 50%;
+    right: auto;
+    bottom: 24px;
+    transform: translateX(-50%);
+    min-width: 288px;
+    padding: 6px 16px;
+    flex-wrap: wrap;
+  }
+</style>

src/components/Snackbar/store.js

@@ -0,0 +1,10 @@
+import { writable } from 'svelte/store';
+import { SNACKBAR_SEVERITY } from './constants';
+
+export const snackbarStore = writable({
+  open: false,
+  message: '',
+  severity: SNACKBAR_SEVERITY.INFO,
+  handleClose: () => {},
+  autoHideDuration: 6000,
+});