80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { SettingsNav, SettingsSection, SettingSelect } from '@/components/settings'
|
|
import { updateAISettings } from '@/app/actions/ai-settings'
|
|
|
|
export default function AppearanceSettingsPage() {
|
|
const [theme, setTheme] = useState('auto')
|
|
const [fontSize, setFontSize] = useState('medium')
|
|
|
|
const handleThemeChange = async (value: string) => {
|
|
setTheme(value)
|
|
// TODO: Implement theme persistence
|
|
console.log('Theme:', value)
|
|
}
|
|
|
|
const handleFontSizeChange = async (value: string) => {
|
|
setFontSize(value)
|
|
// TODO: Implement font size persistence
|
|
await updateAISettings({ fontSize: value as any })
|
|
}
|
|
|
|
return (
|
|
<div className="container mx-auto py-10 px-4 max-w-6xl">
|
|
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
|
{/* Sidebar Navigation */}
|
|
<aside className="lg:col-span-1">
|
|
<SettingsNav />
|
|
</aside>
|
|
|
|
{/* Main Content */}
|
|
<main className="lg:col-span-3 space-y-6">
|
|
<div>
|
|
<h1 className="text-3xl font-bold mb-2">Appearance</h1>
|
|
<p className="text-gray-600 dark:text-gray-400">
|
|
Customize the look and feel of the application
|
|
</p>
|
|
</div>
|
|
|
|
<SettingsSection
|
|
title="Theme"
|
|
icon={<span className="text-2xl">🎨</span>}
|
|
description="Choose your preferred color scheme"
|
|
>
|
|
<SettingSelect
|
|
label="Color Scheme"
|
|
description="Select the app's visual theme"
|
|
value={theme}
|
|
options={[
|
|
{ value: 'light', label: 'Light' },
|
|
{ value: 'dark', label: 'Dark' },
|
|
{ value: 'auto', label: 'Auto (system)' },
|
|
]}
|
|
onChange={handleThemeChange}
|
|
/>
|
|
</SettingsSection>
|
|
|
|
<SettingsSection
|
|
title="Typography"
|
|
icon={<span className="text-2xl">📝</span>}
|
|
description="Adjust text size for better readability"
|
|
>
|
|
<SettingSelect
|
|
label="Font Size"
|
|
description="Adjust the size of text throughout the app"
|
|
value={fontSize}
|
|
options={[
|
|
{ value: 'small', label: 'Small' },
|
|
{ value: 'medium', label: 'Medium' },
|
|
{ value: 'large', label: 'Large' },
|
|
]}
|
|
onChange={handleFontSizeChange}
|
|
/>
|
|
</SettingsSection>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|