Provide a template page

Author: Brayden

plugins/interface/components/theme/ThemeSelector.tsx

@@ -3,64 +3,45 @@ import { cn } from '../../utils/index'
 // import { Moon, Sun } from '@phosphor-icons/react'
 import { useState } from 'hono/jsx'
 
-// type ThemeSelectorProps = {
-//   onClick: () => void
-//   theme: 'light' | 'dark'
-// }
-
-const ThemeSelector = () =>
-    // { onClick, theme }: ThemeSelectorProps
-    {
-        const [theme, setTheme] = useState<'dark' | 'light'>(() => {
-            if (typeof window !== 'undefined') {
-                const stored = document.cookie
-                    .split('; ')
-                    .find((row) => row.startsWith('theme='))
-                    ?.split('=')[1] as 'light' | 'dark'
-                return stored || 'light'
-            }
-            return 'light'
-        })
+const ThemeSelector = () => {
+    const [theme, setTheme] = useState<'dark' | 'light'>(() => {
+        if (typeof window !== 'undefined') {
+            const stored = document.cookie
+                .split('; ')
+                .find((row) => row.startsWith('theme='))
+                ?.split('=')[1] as 'light' | 'dark'
+            return stored || 'light'
+        }
+        return 'light'
+    })
 
-        useTheme(theme)
+    useTheme(theme)
 
-        const toggleTheme = () => {
-            setTheme((prevTheme) => (prevTheme === 'dark' ? 'light' : 'dark'))
-        }
+    const toggleTheme = () => {
+        setTheme((prevTheme) => (prevTheme === 'dark' ? 'light' : 'dark'))
+    }
 
-        return (
-            <button
-                className="flex size-8 cursor-pointer items-center justify-center rounded-md hover:bg-neutral-200/60 dark:hover:bg-neutral-900"
-                onClick={() => toggleTheme()}
+    return (
+        <button
+            className="flex cursor-pointer items-center justify-center rounded-md hover:bg-neutral-200/60 dark:hover:bg-neutral-900"
+            onClick={() => toggleTheme()}
+        >
+            <div
+                className={cn('hidden', {
+                    'animate-fade block': theme === 'dark',
+                })}
             >
-                <div
-                    className={cn('hidden', {
-                        'animate-fade block': theme === 'dark',
-                    })}
-                >
-                    Moon
-                </div>
-                <div
-                    className={cn('animate-fade block', {
-                        hidden: theme === 'dark',
-                    })}
-                >
-                    Sun
-                </div>
-                {/* <Moon
-          weight="bold"
-          className={cn('hidden', {
-            'animate-fade block': theme === 'dark',
-          })}
-        />
-        <Sun
-          weight="bold"
-          className={cn('animate-fade block', {
-            hidden: theme === 'dark',
-          })}
-        /> */}
-            </button>
-        )
-    }
+                Dark
+            </div>
+            <div
+                className={cn('animate-fade block', {
+                    hidden: theme === 'dark',
+                })}
+            >
+                Light
+            </div>
+        </button>
+    )
+}
 
 export default ThemeSelector

plugins/interface/pages/template/index.tsx

@@ -0,0 +1,39 @@
+import { StrictMode } from 'hono/jsx'
+import { hydrateRoot } from 'hono/jsx/dom/client'
+
+import { Button } from '@interface/components/button/Button'
+import { Label } from '@interface/components/label/Label'
+import { Input } from '@interface/components/input/Input'
+import { Avatar } from '@interface/components/avatar'
+import { Card } from '@interface/components/card'
+import { Select } from '@interface/components/select'
+import { Toggle } from '@interface/components/toggle'
+import ThemeSelector from '@interface/components/theme/ThemeSelector'
+
+const root = document.querySelector(
+    '#root[data-client="template"]'
+) as HTMLElement
+
+type ServerProps = {}
+
+// Get server props from the data attribute
+const serverProps = root
+    ? (JSON.parse(root.dataset.serverProps || '{}') as ServerProps)
+    : ({} as ServerProps)
+
+if (root) {
+    hydrateRoot(
+        root,
+        <StrictMode>
+            <Template {...serverProps} />
+        </StrictMode>
+    )
+}
+
+function Template({}: ServerProps) {
+    return (
+        <section>
+            <h1>Template Page</h1>
+        </section>
+    )
+}

public/.vite/manifest.json

@@ -5,7 +5,7 @@
         "imports": ["_vendor.BvOnseLb.js"]
     },
     "_global.!~{008}~.js": {
-        "file": "assets/global.BTh_2Mw6.css",
+        "file": "assets/global.BuEUFxXj.css",
         "src": "_global.!~{008}~.js"
     },
     "_vendor.BvOnseLb.js": {
@@ -20,28 +20,28 @@
         "imports": ["_components.Bua98qd2.js", "_vendor.BvOnseLb.js"]
     },
     "plugins/interface/pages/home/index.tsx": {
-        "file": "assets/home.BQILdUQ8.js",
+        "file": "assets/home.Bgj4-SAu.js",
         "name": "home",
         "src": "plugins/interface/pages/home/index.tsx",
         "isEntry": true,
         "imports": ["_components.Bua98qd2.js", "_vendor.BvOnseLb.js"],
-        "css": ["assets/global.BTh_2Mw6.css"]
+        "css": ["assets/global.BuEUFxXj.css"]
     },
     "plugins/interface/pages/page1/index.tsx": {
-        "file": "assets/page1.CaXqYoXy.js",
+        "file": "assets/page1.CdyEBqge.js",
         "name": "page1",
         "src": "plugins/interface/pages/page1/index.tsx",
         "isEntry": true,
         "imports": ["_components.Bua98qd2.js", "_vendor.BvOnseLb.js"],
-        "css": ["assets/global.BTh_2Mw6.css"]
+        "css": ["assets/global.BuEUFxXj.css"]
     },
     "plugins/interface/pages/page2/index.tsx": {
-        "file": "assets/page2.BMvixpAs.js",
+        "file": "assets/page2.BVDjxAx2.js",
         "name": "page2",
         "src": "plugins/interface/pages/page2/index.tsx",
         "isEntry": true,
         "imports": ["_components.Bua98qd2.js", "_vendor.BvOnseLb.js"],
-        "css": ["assets/global.BTh_2Mw6.css"]
+        "css": ["assets/global.BuEUFxXj.css"]
     },
     "plugins/interface/pages/template/index.tsx": {
         "file": "assets/template.Ck87uEDC.js",