108 lines
4.2 KiB
TypeScript
108 lines
4.2 KiB
TypeScript
|
|
import { useState, useEffect } from 'react';
|
|
import { Globe, Server, Save } from 'lucide-react';
|
|
|
|
export function SystemSettings() {
|
|
const [language, setLanguage] = useState(localStorage.getItem('language') || 'English');
|
|
const [theme, setTheme] = useState(localStorage.getItem('theme') || 'Light');
|
|
const [debugMode, setDebugMode] = useState(true);
|
|
|
|
const handleSave = () => {
|
|
localStorage.setItem('language', language);
|
|
localStorage.setItem('theme', theme);
|
|
|
|
// Apply theme
|
|
if (theme === 'Dark') {
|
|
document.documentElement.classList.add('dark');
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
}
|
|
|
|
// In a real app, you would dispatch a language change event or context update here
|
|
alert(`Settings saved!\nLanguage: ${language}\nTheme: ${theme}`);
|
|
};
|
|
|
|
// Initialize theme on mount if needed
|
|
useEffect(() => {
|
|
if (theme === 'Dark') {
|
|
document.documentElement.classList.add('dark');
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
}
|
|
}, [theme]);
|
|
|
|
return (
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="mb-6">
|
|
<h3 className="text-xl font-semibold text-slate-800">System Settings</h3>
|
|
<p className="text-sm text-slate-500 mt-1">Global platform configurations.</p>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<div className="bg-white border border-slate-200 rounded-xl shadow-sm p-6">
|
|
<h4 className="text-sm font-semibold text-slate-800 mb-4 flex items-center">
|
|
<Globe size={16} className="mr-2 text-slate-500" />
|
|
General
|
|
</h4>
|
|
<div className="space-y-4 max-w-md">
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">System Language</label>
|
|
<select
|
|
value={language}
|
|
onChange={(e) => setLanguage(e.target.value)}
|
|
className="w-full bg-slate-50 border border-slate-200 text-sm rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
|
|
>
|
|
<option value="English">English</option>
|
|
<option value="简体中文">简体中文</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Theme</label>
|
|
<select
|
|
value={theme}
|
|
onChange={(e) => setTheme(e.target.value)}
|
|
className="w-full bg-slate-50 border border-slate-200 text-sm rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
|
|
>
|
|
<option value="Light">Light</option>
|
|
<option value="Dark">Dark</option>
|
|
<option value="System Default">System Default</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white border border-slate-200 rounded-xl shadow-sm p-6">
|
|
<h4 className="text-sm font-semibold text-slate-800 mb-4 flex items-center">
|
|
<Server size={16} className="mr-2 text-slate-500" />
|
|
Cluster & Runtime
|
|
</h4>
|
|
<div className="space-y-4 max-w-md">
|
|
<div className="flex items-center mt-4">
|
|
<input
|
|
type="checkbox"
|
|
id="debug_mode"
|
|
checked={debugMode}
|
|
onChange={(e) => setDebugMode(e.target.checked)}
|
|
className="w-4 h-4 text-blue-600 border-slate-300 rounded focus:ring-blue-500"
|
|
/>
|
|
<label htmlFor="debug_mode" className="ml-2 block text-sm text-slate-700">
|
|
Enable debug logging
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end">
|
|
<button
|
|
onClick={handleSave}
|
|
className="flex items-center px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium transition-colors shadow-sm cursor-pointer"
|
|
>
|
|
<Save size={16} className="mr-2" />
|
|
Save Changes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|