feat: initialize React Spectrum template with layouts and showcases

1 files changed, 38 insertions, 0 deletions

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