chore: docs

mathuo · Feb 27, 2024 · 80d1fc3 · 80d1fc3
1 parent f7ebc7e
commit 80d1fc3
Showing 1 changed file with 39 additions and 31 deletions.
diff --git a/packages/docs/src/pages/demo.tsx b/packages/docs/src/pages/demo.tsx
@@ -2,12 +2,46 @@ import React from 'react';
 import Layout from '@theme/Layout';
 import { themeConfig } from '../config/theme.config';
 import ExampleFrame from '../components/ui/exampleFrame';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 
-export default function Popout() {
-    // const [theme, setTheme] = React.useState<string>(
-    //     new URLSearchParams(location.search).get('theme') ?? themeConfig[3].id
-    // );
+const ThemeToggle: React.FC = () => {
+    const [theme, setTheme] = React.useState<string>(
+        new URLSearchParams(location.search).get('theme') ?? themeConfig[3].id
+    );
 
+    return (
+        <>
+            <div
+                style={{
+                    height: '40px',
+                    display: 'flex',
+                    alignItems: 'center',
+                }}
+            >
+                <select
+                    onChange={(event) => {
+                        const url = new URL(window.location.href);
+                        url.searchParams.set('theme', event.target.value);
+                        window.location.href = url.toString();
+                    }}
+                    value={theme}
+                >
+                    {themeConfig.map((theme) => {
+                        return <option>{theme.id}</option>;
+                    })}
+                </select>
+            </div>
+            <ExampleFrame
+                theme={theme}
+                framework="react"
+                height="100%"
+                id="dockview/demo-dockview"
+            />
+        </>
+    );
+};
+
+export default function Popout() {
     return (
         <Layout noFooter={true}>
             <div
@@ -19,33 +53,7 @@ export default function Popout() {
                     flexDirection: 'column',
                 }}
             >
-                <div
-                    style={{
-                        height: '40px',
-                        display: 'flex',
-                        alignItems: 'center',
-                    }}
-                >
-                    <select
-                        onChange={(event) => {
-                            const url = new URL(window.location.href);
-                            url.searchParams.set('theme', event.target.value);
-                            window.location.href = url.toString();
-                        }}
-                        // value={theme}
-                    >
-                        {themeConfig.map((theme) => {
-                            return <option>{theme.id}</option>;
-                        })}
-                    </select>
-                </div>
-
-                <ExampleFrame
-                    // theme={theme}
-                    framework="react"
-                    height="100%"
-                    id="dockview/demo-dockview"
-                />
+                <BrowserOnly>{() => <ThemeToggle />}</BrowserOnly>
             </div>
         </Layout>
     );