⭐ feat(www): Add a play route

packages/www/package.json

@@ -27,6 +27,7 @@
     "@solid-primitives/storage": "^4.3.1",
     "@solidjs/router": "^0.15.3",
     "modern-normalize": "^3.0.1",
-    "solid-js": "^1.9.5"
+    "solid-js": "^1.9.5",
+    "solid-notifications": "^1.1.2"
   }
 }

packages/www/src/App.tsx

@@ -6,14 +6,15 @@ import '@fontsource/geist-sans/600.css';
 import '@fontsource/geist-sans/700.css';
 import '@fontsource/geist-sans/800.css';
 import '@fontsource/geist-sans/900.css';
-import { TeamCreate } from './pages/new';
+import { PlayComponent } from './pages/play';
 import { styled } from "@macaron-css/solid";
 import { useStorage } from './providers/account';
 import { darkClass, lightClass, theme } from './ui/theme';
 import { AuthProvider, useAuth } from './providers/auth';
 import { Navigate, Route, Router } from "@solidjs/router";
 import { globalStyle, macaron$ } from "@macaron-css/core";
 import { Component, createSignal, Match, onCleanup, Switch } from 'solid-js';
+import TestComponent from './pages/test';
 
 const Root = styled("div", {
     base: {
@@ -34,10 +35,10 @@ globalStyle("html", {
     // Hardcode colors
     "@media": {
         "(prefers-color-scheme: light)": {
-            backgroundColor: "hsla(0,0%,98%)",
+            backgroundColor: "#f5f5f5",
         },
         "(prefers-color-scheme: dark)": {
-            backgroundColor: "hsla(0,0%,0%)",
+            backgroundColor: "#1e1e1e",
         },
     },
 });
@@ -87,35 +88,14 @@ export const App: Component = () => {
                 <Route
                     path="*"
                     component={(props) => (
-                        <AuthProvider>
-                            {props.children}
-                        </AuthProvider>
-                        // <CommandBar>
-                        //         <ReplicacheStatusProvider>
-                        //             <DummyProvider>
-                        //                 <DummyConfigProvider>
-                        //                     <FlagsProvider>
-                        //                         <RealtimeProvider />
-                        //                         <LocalProvider>
-                        //                             <LocalLogsProvider>
-                        //                                 <GlobalCommands />
-                        //                                 {props.children}
-                        //                             </LocalLogsProvider>
-                        //                         </LocalProvider>
-                        //                     </FlagsProvider>
-                        //                 </DummyConfigProvider>
-                        //             </DummyProvider>
-                        //         </ReplicacheStatusProvider>
-                        //     </AuthProvider>
-                        // </CommandBar>
+                        // <AuthProvider>
+                            // {props.children}
+                            props.children
+                        // </AuthProvider>
                     )}
                 >
-                    {/* <Route path="local" component={Local} />
-                        <Route path="debug" component={DebugRoute} />
-                        <Route path="design" component={Design} />
-                        <Route path="workspace" component={WorkspaceCreate} />
-                        <Route path=":workspaceSlug">{WorkspaceRoute}</Route> */}
-                    <Route path="new" component={TeamCreate} />
+                    <Route path="play/:id" component={PlayComponent} />
+                    <Route path="test" component={TestComponent} />
                     <Route
                         path="/"
                         component={() => {

packages/www/src/index.tsx

@@ -8,6 +8,7 @@ import { render } from "solid-js/web";
 import "modern-normalize/modern-normalize.css";
 import { App } from "./App";
 import { StorageProvider } from "./providers/account";
+// import { ToastProvider, Toaster } from "solid-notifications";
 
 const root = document.getElementById("root");
 
@@ -19,9 +20,12 @@ if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
 
 render(
   () => (
-    <StorageProvider>
-      <App />
-    </StorageProvider>
+    // <ToastProvider>
+    //   <Toaster />
+      <StorageProvider>
+        <App />
+      </StorageProvider>
+    // </ToastProvider>
   ),
   root!
 );