e.preventDefault() }>
+
+ value={ selectedLanguage.name }
+ onChange={ (e) =>
setSelectedLanguage(
languages.find(
- (lang) => lang.name === e.target.value,
- ) || languages[0],
+ (lang) => lang.name === e.target.value
+ ) || languages[0]
)
}
- className="px-4 py-2 border rounded"
+ className='px-4 py-2 border rounded'
>
- {languages.map((lang) => (
-
- {lang.name}
+ { languages.map((lang) => (
+
+ { lang.name }
- ))}
+ )) }
-
+
- You are User {userId} in Room {roomId}.
- {isReadOnly
- ? `User ${editingUser} is currently editing.`
- : 'You can edit now. Press Enter to switch control.'}
+ You are User { userId } in Room { roomId }.
+ { isReadOnly
+ ? `User ${ editingUser } is currently editing.`
+ : 'You can edit now. Press Enter to switch control.' }
- {isReadOnly && (
+ { isReadOnly && (
Request Edit Permission
- )}
+ ) }
)
diff --git a/components/FloatingMenu.tsx b/components/FloatingMenu.tsx
new file mode 100644
index 0000000..2e9b0f9
--- /dev/null
+++ b/components/FloatingMenu.tsx
@@ -0,0 +1,59 @@
+'use client'
+
+import React, { useState } from 'react'
+import { Button, Modal } from 'react-daisyui'
+import SettingPanel from './SettingPanel'
+// import ChangeThemePanel from './ChangeThemePanel';
+import { Icons } from '@/common/icons'
+import { ThemePanel } from './ThemePanel'
+
+export const FloatingMenu: React.FC = (
+ props: React.ComponentProps<'div'> | { className: string },
+) => {
+ // const [isSettingsOpen, setIsSettingsOpen] = useState(false)
+ // const [isThemeOpen, setIsThemeOpen] = useState(false)
+ const { Dialog: SettingDialog, handleShow: settingHandleShow } =
+ Modal.useDialog()
+ const { Dialog: ThemeDialog, handleShow: themeHandleShow } =
+ Modal.useDialog()
+ // const { , } = Modal.useDialog()
+
+ return (
+
+
+
+
+
+ 设置
+
+
+
+
+
+
+
+
+
+
+
+ 设置
+
+
+
+
+
+
+
+ )
+}
diff --git a/components/SettingPanel.tsx b/components/SettingPanel.tsx
index 5610c5f..6feefcb 100644
--- a/components/SettingPanel.tsx
+++ b/components/SettingPanel.tsx
@@ -1,7 +1,6 @@
import { Select, Card } from 'react-daisyui'
import React from 'react'
import { create } from 'zustand'
-
interface Settings {
language: string
theme: string
@@ -9,12 +8,12 @@ interface Settings {
interface SettingsStore {
settings: Settings
- updateSettings: (settings: Settings) => void
+ setSettings: (settings: Settings) => void
}
export const useSettingsStore = create
((set) => ({
settings: { language: 'javascript', theme: 'light' },
- updateSettings: (newSettings) => set({ settings: newSettings }),
+ setSettings: (newSettings) => set({ settings: newSettings }),
}))
interface SettingPanelProps {
@@ -24,59 +23,33 @@ interface SettingPanelProps {
export default function SettingPanel({
onSettingChange = () => {},
}: SettingPanelProps) {
- const { settings, updateSettings } = useSettingsStore()
+ const { settings, setSettings } = useSettingsStore()
const handleSettingChange = (key: 'language' | 'theme', value: string) => {
const newSettings = { ...settings, [key]: value }
- updateSettings(newSettings)
+ setSettings(newSettings)
onSettingChange(newSettings)
}
return (
-
-
-
-
- 编程语言
-
- ) =>
- handleSettingChange('language', e.target.value)
- }
- className="w-full max-w-xs"
- >
-
- JavaScript
-
-
- TypeScript
-
- Python
- Java
-
-
-
-
-
- 主题
-
-
- handleSettingChange('theme', e.target.value)
- }
- className="w-full max-w-xs"
- >
- Light
- Dark
- Cupcake
- Dracula
- Night
- Coffee
-
-
-
-
+
+
+
+ 编程语言
+
+ ) =>
+ handleSettingChange('language', e.target.value)
+ }
+ className="w-full max-w-xs"
+ >
+ JavaScript
+ TypeScript
+ Python
+ Java
+
+
+
& {
+ dataTheme: string
+ selected?: boolean
+}
+
+const ThemeItem = ({
+ selected,
+ children,
+ dataTheme,
+ className,
+ ...props
+}: ThemeItemProps) => {
+ const classes = twMerge(
+ className,
+ 'border-base-content/20 hover:border-base-content/40 outline-base-content\
+ overflow-hidden rounded-lg border outline-2 outline-offset-2',
+ clsx({
+ outline: selected,
+ })
+ )
+
+ return (
+
+
+
+
+
+
+
{dataTheme}
+
+ {children &&
{children}
}
+
+
+
+
((set) => ({
+ theme: { light: 'ca', dark: 'dark', mode: 'follow-system' },
+ setTheme: (newTheme: string) => {},
+}))
+
+function getTheme(theme: Theme) {
+ // 根据传入的 theme 配置返回具体的主题
+ if (theme.mode === 'light') {
+ return theme.light
+ }
+
+ if (theme.mode === 'dark') {
+ return theme.dark
+ }
+
+ // follow-system 模式下根据系统主题返回
+ if (typeof window !== 'undefined') {
+ const prefersDark = window.matchMedia(
+ '(prefers-color-scheme: dark)',
+ ).matches
+ return prefersDark ? theme.dark : theme.light
+ }
+
+ // 默认返回 light 主题
+ return theme.light
+}
+
+export const ThemePanel: React.FC = (props: React.ComponentProps<'div'>) => {
+ const { theme, setTheme } = useThemeStore()
+ return (
+
+
Theme
+
+ {tailwindConfig.daisyui.themes.map((t, i) => (
+ {
+ document
+ .getElementsByTagName('html')[0]
+ .setAttribute('data-theme', t)
+ window.localStorage.setItem(
+ 'sb-react-daisyui-preview-theme',
+ t,
+ )
+ setTheme(t)
+ }}
+ />
+ ))}
+
+