🏎 simple animations for toasts

package.json

@@ -14,6 +14,7 @@
   "type": "module",
   "license": "MIT",
   "devDependencies": {
+    "@formkit/auto-animate": "1.0.0-beta.1",
     "@iconify-json/carbon": "1.1.7",
     "@mdx-js/rollup": "2.1.2",
     "@rollup/plugin-replace": "4.0.0",

src/components/toaster/index.tsx

@@ -1,4 +1,5 @@
-import type { Component } from 'solid-js'
+import type { Component, Ref } from 'solid-js'
+import autoAnimate from '@formkit/auto-animate'
 
 type Toast = {
   id: string
@@ -10,28 +11,41 @@ const createToaster = () => {
 
   const toast = (message: string) => {
     const id = Math.random().toString()
-    setTimeout(() => {
-      setToasts(toasts => toasts.filter(t => t.id !== id))
-    }, 1000)
     setToasts(toasts => [...toasts, { id, message }])
   }
 
+  const removeToast = (id: string) => {
+    setToasts(toasts => toasts.filter(t => t.id !== id))
+  }
+
   return {
     toasts,
+    removeToast,
     toast,
   }
 }
 
-interface Props extends ReturnType<typeof createToaster> {}
+interface Props extends ReturnType<typeof createToaster> { }
 
 const Toaster: Component<Props> = (props) => {
+  let toasterRef: Ref<any>
+
+  createEffect(() => {
+    toasterRef && autoAnimate(toasterRef)
+  })
+
   return (
-    <div class="absolute p-5 top-0 right-0">
-      <For each={props.toasts()} children={({ message }) => (
-        <div class="bg-white p-2 mb-5 rounded">
-          {message}
+    <div ref={toasterRef} class="absolute p-5 top-0 right-0">
+      <For each={props.toasts()} children={({ message, id }) => (
+        <div class="flex space-x-2 bg-white p-2 mb-5 rounded">
+          <button class="text-red-600 font-black" onClick={() => props.removeToast(id)}>
+            X
+          </button>
+          <p>
+            {message}
+          </p>
         </div>
-      )}/>
+      )} />
     </div>
   )
 }