From 6af33c27d227fbd0053387cf6aff182604d1bff0 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Wed, 28 Jul 2021 15:56:51 -0700
Subject: [PATCH] Create toast message with state.

---
 src/lib/toast/Toast.svelte | 33 +++++++++++++++++++++++++++++++++
 src/lib/toast/toast.js     | 15 +++++++++++++++
 src/routes/index.svelte    |  8 +++++++-
 3 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/toast/Toast.svelte
 create mode 100644 src/lib/toast/toast.js

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 @@
+<script>
+	import Portal from '../Portal.svelte';
+	import { toast } from './toast';
+</script>
+
+<Portal>
+	<div class="toast-wrapper">
+		{#each $toast as message}
+			<div class="toast">
+				<p>{message}</p>
+			</div>
+		{/each}
+	</div>
+</Portal>
+
+<style>
+	.toast-wrapper {
+		position: fixed;
+		bottom: 0;
+		right: 20px;
+	}
+
+	.toast {
+		margin-bottom: 1rem;
+		padding: 20px;
+		border-radius: 15px;
+		box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
+	}
+
+	p {
+		margin: 0;
+	}
+</style>
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 @@
 		<Field value={0} label="Number" type="number" />
 	</div>
 </Modal>
-<button on:click={() => (isModalOpen = true)}>Open Modal Form</button>
+
+<Toast />
+<button on:click={() => toast.send('New Message')}>New Toast</button>
+
+<!-- <button on:click={() => (isModalOpen = true)}>Open Modal Form</button> -->
 
 <SearchFilter {items} bind:search />