diff --git a/src/lib/toast/Toast.svelte b/src/lib/toast/Toast.svelte new file mode 100644 index 0000000..f01dacf --- /dev/null +++ b/src/lib/toast/Toast.svelte @@ -0,0 +1,33 @@ + + + + + {#each $toast as message} + + {message} + + {/each} + + + + diff --git a/src/lib/toast/toast.js b/src/lib/toast/toast.js new file mode 100644 index 0000000..e5df451 --- /dev/null +++ b/src/lib/toast/toast.js @@ -0,0 +1,15 @@ +import { writable } from "svelte/store"; + +const newToast = () => { + const { subscribe, update } = writable([]); + + function send(message) { + update((state) => { + return [...state, message]; + }) + } + + return { subscribe, send }; +} + +export const toast = newToast(); \ No newline at end of file diff --git a/src/routes/index.svelte b/src/routes/index.svelte index 9f1e8ea..463dff9 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -3,6 +3,8 @@ import Field from '$lib/Field.svelte'; import Markdown from '$lib/Markdown.svelte'; import Modal from '$lib/Modal.svelte'; + import Toast from '$lib/toast/Toast.svelte'; + import { toast } from '$lib/toast/toast'; import Portal from '$lib/Portal.svelte'; // import BetterAccordion from '$lib/BetterAccordion.svelte'; // import Toggle from '$lib/Toggle.svelte'; @@ -23,7 +25,11 @@ - (isModalOpen = true)}>Open Modal Form + + + toast.send('New Message')}>New Toast + +
{message}