docs: add demo to the new docs site

apps/docs/examples/demo/Counter.js

@@ -0,0 +1,13 @@
+import { useAppState } from './store';
+
+export default function Counter() {
+  const count = useAppState((s) => s.count);
+
+  return (
+    <div className="inline-flex mx-5">
+      <span className="countdown font-mono text-6xl">
+        <span style={{ '--value': count }}></span>
+      </span>
+    </div>
+  );
+}

apps/docs/examples/demo/Header.js

@@ -0,0 +1,30 @@
+import { setAppState, useAppState } from './store';
+
+export default function Header() {
+  const mode = useAppState((s) => s.mode);
+
+  const toggleTheme = () => {
+    setAppState((s) => {
+      s.mode = s.mode === 'Light' ? 'Dark' : 'Light';
+    });
+  };
+
+  return (
+    <div className="navbar">
+      <div className="flex-1">
+        <a className="btn btn-ghost text-xl">React State</a>
+      </div>
+      <div className="flex-none">
+        <div className="flex flex-row-reverse">
+          {mode === 'Light' ? '🔆' : '🌙'}
+          <input
+            type="checkbox"
+            className="toggle"
+            checked={mode === 'Dark'}
+            onChange={toggleTheme}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/docs/examples/demo/index.js

@@ -0,0 +1,30 @@
+import { useAppState, setAppState } from './store';
+import Header from './Header';
+import Counter from './Counter';
+
+export default function App() {
+  const mode = useAppState((s) => s.mode);
+  const classNames = `${mode === 'Light' ? 'bg-white' : 'bg-dark'} pb-5`;
+  return (
+    <div className={classNames} data-mode="light">
+      <Header />
+      <div className="flex justify-center mt-5">
+        <Counter />
+        <Counter />
+        <Counter />
+      </div>
+      <div className="flex justify-center mt-5">
+        <button
+          className="btn btn-sm btn-success"
+          onClick={() =>
+            setAppState((s) => {
+              s.count++;
+            })
+          }
+        >
+          INCREMENT
+        </button>
+      </div>
+    </div>
+  );
+}

apps/docs/examples/demo/store.js

@@ -0,0 +1,7 @@
+import { create } from '@opentf/react-state';
+
+const {useAppState, setAppState, api} = create({ mode: 'Light', count: 0 });
+
+api.subscribe(console.log);
+
+export { useAppState, setAppState };

apps/docs/pages/index.mdx

@@ -1,4 +1,9 @@
 import { Tabs, Callout } from "nextra/components";
+import { SandBox } from '@opentf/react-sandbox';
+import demo from '!!raw-loader!../examples/demo/index';
+import store from '!!raw-loader!../examples/demo/store';
+import Header from '!!raw-loader!../examples/demo/Header';
+import counter from '!!raw-loader!../examples/demo/Counter';
 
 # Introduction
 
@@ -59,3 +64,12 @@ export default function App() {
   );
 }
 ```
+
+## Demo
+<SandBox
+  tabIndex={1}
+  deps={['@opentf/react-state@next']}
+  code={demo}
+  files={{'/store.js': store, '/Header.js': Header, '/Counter.js': counter}}
+  cdns={['https://cdn.tailwindcss.com', 'https://cdn.jsdelivr.net/npm/daisyui@4.9.0/dist/full.min.css']}
+/>