add layout choice

This commit is contained in:
TamHC 2025-06-24 20:45:25 +08:00 committed by GitHub
parent 0668c4d8b8
commit 88ab31e820
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 398 additions and 103 deletions

View file

@ -417,11 +417,34 @@ const Page = () => {
config && (
<div className="flex flex-col space-y-6 pb-28 lg:pb-8">
<SettingsSection title="Appearance">
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
Theme
</p>
<ThemeSwitcher />
<div className="flex flex-col space-y-4">
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
Theme
</p>
<ThemeSwitcher />
</div>
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
Layout Mode
</p>
<p className="text-xs text-black/60 dark:text-white/60">
Choose how to display answer, sources, and related content (stored locally in browser)
</p>
<Select
value={localStorage.getItem('layoutMode') || 'default'}
onChange={(e) => {
const value = e.target.value;
localStorage.setItem('layoutMode', value);
// Force a re-render to update the UI
window.location.reload();
}}
options={[
{ value: 'default', label: 'Default (Separate Sections)' },
{ value: 'tabs', label: 'Tabs (Answer, Sources, Related)' },
]}
/>
</div>
</div>
</SettingsSection>