feat: initialize React Spectrum template with layouts and showcases

1 files changed, 41 insertions, 0 deletions

diff --git a/src/components/global-settings.tsx b/src/components/global-settings.tsx
new file mode 100644
index 0000000..4e9c507
--- /dev/null
+++ b/src/components/global-settings.tsx
@@ -0,0 +1,41 @@
+import { useId } from 'react'
+import { ActionButton } from '@react-spectrum/s2/ActionButton'
+import { DialogTrigger, Popover } from '@react-spectrum/s2/Popover'
+import { Radio, RadioGroup } from '@react-spectrum/s2/RadioGroup'
+import { Tooltip, TooltipTrigger } from '@react-spectrum/s2/Tooltip'
+import SettingsIcon from '@react-spectrum/s2/icons/Settings'
+import { useTheme } from '../theme'
+import styles from './global-settings.module.css'
+
+function GlobalSettings() {
+  const titleId = useId()
+  const { colorScheme, setColorScheme } = useTheme()
+
+  return (
+    <DialogTrigger>
+      <TooltipTrigger>
+        <ActionButton aria-label="全局设置" isQuiet>
+          <SettingsIcon />
+        </ActionButton>
+        <Tooltip>全局设置</Tooltip>
+      </TooltipTrigger>
+      <Popover placement="bottom end" aria-labelledby={titleId}>
+        <div className={styles.settings}>
+          <h2 id={titleId} className={styles.title}>全局设置</h2>
+          <RadioGroup
+            label="外观模式"
+            value={colorScheme}
+            onChange={(value) => {
+              if (value === 'light' || value === 'dark') setColorScheme(value)
+            }}
+          >
+            <Radio value="light">亮色</Radio>
+            <Radio value="dark">暗色</Radio>
+          </RadioGroup>
+        </div>
+      </Popover>
+    </DialogTrigger>
+  )
+}
+
+export default GlobalSettings