toast messages

app/client.tsx

@@ -1,16 +1,21 @@
 "use client";
 
+import { useToast } from "@/components/toast";
 import { TTCMD } from "@/components/ttcmd";
+import { useEffect } from "react";
 import { FC, use } from "react";
 
 export const HomeClient: FC<{ body: Promise<string> }> = ({ body }) => {
   const text = use(body);
 
-  return (
-    <TTCMD
-      body={text}
-      parserId="home"
-      title="home"
-    />
-  );
+  const { createToast } = useToast();
+  useEffect(() => {
+    createToast({
+      fading: false,
+      msg: "TEST TOAST",
+      type: "error",
+    });
+  }, [createToast]);
+
+  return <TTCMD body={text} parserId="home" title="home" />;
 };

app/globals.css

@@ -93,6 +93,12 @@
   }
 }
 
+@layer utilities {
+  .fade-toast {
+    animation: fadeOut 300ms forwards;
+  }
+}
+
 @keyframes identifier {
 }
 
@@ -102,3 +108,12 @@
     list-style: square;
   }
 }
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}

app/layout.tsx

@@ -11,6 +11,8 @@ import {
 import Link from "next/link";
 import { DevToolboxContextProvider } from "@/components/devtools/context";
 import { RecoilRootClient } from "@/components/recoilRoot";
+import { JotaiProvider } from "@/components/jotaiProvider";
+import { Toaster } from "@/components/toast";
 
 const roboto = Roboto({ subsets: ["latin"], weight: "400" });
 
@@ -74,13 +76,14 @@ export default function RootLayout({
           </ul>
         </nav>
         <RecoilRootClient>
-          <DevToolboxContextProvider
-            isDev={process.env.NODE_ENV !== "production"}
-          >
-            <main className="p-8 w-full overflow-visible">
-              {children}
-            </main>
-          </DevToolboxContextProvider>
+          <JotaiProvider>
+            <DevToolboxContextProvider
+              isDev={process.env.NODE_ENV !== "production"}
+            >
+              <main className="p-8 w-full overflow-visible">{children}</main>
+              <Toaster />
+            </DevToolboxContextProvider>
+          </JotaiProvider>
         </RecoilRootClient>
         <div id="root-portal"></div>
       </body>

app/page.tsx

@@ -11,8 +11,7 @@ export default function Home() {
         <h2 className="strapline">Tabletop Commander</h2>
         <h1>How does it work?</h1>
       </section>
-      {
-        /* <section className="w-full my-6">
+      {/* <section className="w-full my-6">
         <div className="card">
           <p>
             Tabletop Commander (TC) is a rules-and-tools app for tabletop games
@@ -131,8 +130,7 @@ export default function Home() {
           will be done. If this makes it to production, tell Emma she forgot to
           turn the home page into magic
         </cite>
-      </section> */
-      }
+      </section> */}
       <Suspense fallback={<MDSkeletonLoader />}>
         <HomeClient body={body} />
       </Suspense>