Toast notification styling

web/src/pages/HomePage/HomePage.tsx

@@ -1,19 +1,53 @@
-import { Link, routes } from '@redwoodjs/router'
 import { Metadata } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
 
 const HomePage = () => {
   return (
     <>
       <Metadata title="Home" description="Home page" />
 
-      <h1>HomePage</h1>
-      <p>
-        Find me in <code>./web/src/pages/HomePage/HomePage.tsx</code>
-      </p>
-      <p>
-        My default route is named <code>home</code>, link to me with `
-        <Link to={routes.home()}>Home</Link>`
-      </p>
+      <button className="btn" onClick={() => toast.loading('Loading...')}>
+        Infinite loading
+      </button>
+      <button
+        className="btn"
+        onClick={() =>
+          toast.promise(
+            new Promise<number>((resolve, reject) => {
+              setTimeout(() => {
+                const x = Math.random()
+                x >= 0.5 ? resolve(x) : reject(x)
+              }, 750)
+            }),
+            {
+              loading: 'Loading...',
+              success: (res) => `Success: ${res.toFixed(4)}`,
+              error: (err: number) => `Error: ${err.toFixed(4)}`,
+            }
+          )
+        }
+      >
+        Loading -{'>'} Random result
+      </button>
+      <button className="btn" onClick={() => toast('Blank')}>
+        Blank
+      </button>
+      <button className="btn" onClick={() => toast.error('Error')}>
+        Error
+      </button>
+      <button className="btn" onClick={() => toast.success('Success')}>
+        Success
+      </button>
+      <button
+        className="btn"
+        onClick={() =>
+          toast(
+            "I'm baby sriracha poutine hammock pour-over direct trade, bruh coloring book ascot gatekeep put a bird on it YOLO biodiesel. Lyft wayfarers cloud bread, la croix lo-fi pork belly synth williamsburg before they sold out."
+          )
+        }
+      >
+        A pretty big notification
+      </button>
     </>
   )
 }