From 481402e09fe760634b826b09e302e2e1bfec88b1 Mon Sep 17 00:00:00 2001
From: shu <nvcsadjkojf@outlook.com>
Date: Mon, 7 Sep 2026 15:48:36 +0800
Subject: feat: initialize React Spectrum template with layouts and showcases

---
 src/App.tsx | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src/App.tsx

(limited to 'src/App.tsx')

diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..716d5ad
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,38 @@
+import { useLayoutEffect, useState } from 'react'
+import { Outlet, useHref, useNavigate, type NavigateOptions } from 'react-router'
+import { Provider } from '@react-spectrum/s2/Provider'
+import BasicLayout from './components/layout-basic'
+import { getInitialColorScheme, ThemeContext, themeStorageKey } from './theme'
+
+// Configure the type of the `routerOptions` prop on all React Spectrum components.
+declare module '@react-spectrum/s2/Provider' {
+  interface RouterConfig {
+    routerOptions: NavigateOptions
+  }
+}
+
+function App() {
+  const navigate = useNavigate()
+  const [colorScheme, setColorScheme] = useState(getInitialColorScheme)
+
+  useLayoutEffect(() => {
+    document.documentElement.dataset.theme = colorScheme
+    try {
+      localStorage.setItem(themeStorageKey, colorScheme)
+    } catch {
+      // Keep applying the theme even when browser storage is unavailable.
+    }
+  }, [colorScheme])
+
+  return (
+    <ThemeContext value={{ colorScheme, setColorScheme }}>
+      <Provider background="base" colorScheme={colorScheme} router={{ navigate, useHref }}>
+        <BasicLayout>
+          <Outlet />
+        </BasicLayout>
+      </Provider>
+    </ThemeContext>
+  )
+}
+
+export default App
-- 
cgit v1.2.3