Update demo

Author: zerodevx

docs/App.svelte

@@ -231,11 +231,11 @@ toast.pop(0)`,
     name: 'SEND COMPONENT AS A MESSAGE',
     code: `toast.push({
   component: {
-    src: DummyComponent,
+    src: DummyComponent, // where \`src\` is a Svelte component
     props: {
       title: 'A Dummy Cookie Component'
     },
-    sendIdTo: 'toastId'
+    sendIdTo: 'toastId' // send toast id to \`toastId\` prop
   },
   dismissable: false,
   initial: 0,
@@ -251,6 +251,13 @@ toast.pop(0)`,
         theme: { '--toastMsgPadding': '0' }
       })
     }
+  },
+  {
+    name: 'PAUSE ON MOUSE HOVER',
+    code: `toast.push('Hover me!', { pausable: true })`, // eslint-disable-line
+    run: () => {
+      toast.push('Hover me!', { pausable: true })
+    }
   }
 ]
 </script>

docs/Dummy.svelte

@@ -4,14 +4,25 @@ import { toast } from '../src'
 export let toastId
 export let title
 
-const clicked = () => toast.pop(toastId)
+const clicked = ok => {
+  toast.pop(toastId)
+  toast.push({
+    msg: ok ? 'Accepted!' : 'Declined!',
+    target: 'new',
+    theme: {
+      '--toastBackground': ok ? '#48BB78' : '#F56565'
+    }
+  })
+}
+const accepted = () => clicked(true)
+const declined = () => clicked(false)
 </script>
 
 <div class="w-full h-48 bg-yellow-500 rounded-sm flex flex-col">
   <h1 class="font-bold m-2">{title}</h1>
-  <p class="text-sm mx-2 mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  <p class="text-sm mx-2 mb-1"><span class="font-mono font-bold">toastId={toastId}</span>. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
   <div class="flex-1 flex flex-row justify-between">
-    <button class="w-28" on:click={clicked}>DECLINE</button>
-    <button class="w-28" on:click={clicked} data-btn="dummyAccept">ACCEPT</button>
+    <button class="w-28" on:click={declined}>DECLINE</button>
+    <button class="w-28" on:click={accepted} data-btn="dummyAccept">ACCEPT</button>
   </div>
 </div>

docs/index.html

@@ -38,7 +38,7 @@ <h1 class="text-4xl text-center">svelte-toast</h1>
   <p class="container px-2 mb-4">
     Simple, elegant, generic, flexible and performant toast notifications.
     Because a demo helps better than a thousand API docs, so here it is.
-    Use in Vanilla JS (6kb gzipped) or as a Svelte component.
+    Use in Vanilla JS (7kb gzipped) or as a Svelte component.
   </p>
 </body>
 </html>