xinyin025/LangBot
1
0
Fork 0
mirror of https://github.com/langbot-app/LangBot.git synced 2026-08-15 15:00:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: simplify theme toggle implementation in HomeSidebar and ThemeToggle components

Browse Source
This commit is contained in:
Junyan Qin
2025-12-28 22:43:05 +08:00
parent 07ad846e96
commit ba5b481617
2 changed files with 35 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/app/home/components/home-sidebar/HomeSidebar.tsx
+22 -19
View File
@@ -29,7 +29,6 @@ import {
PopoverTrigger, PopoverTrigger,
} from '@/components/ui/popover'; } from '@/components/ui/popover';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
import { LanguageSelector } from '@/components/ui/language-selector'; import { LanguageSelector } from '@/components/ui/language-selector';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import AccountSettingsDialog from '@/app/home/components/account-settings-dialog/AccountSettingsDialog'; import AccountSettingsDialog from '@/app/home/components/account-settings-dialog/AccountSettingsDialog';
@@ -376,28 +375,32 @@ export default function HomeSidebar({
</span> </span>
</div> </div>
<div className="flex items-center gap-2">
<LanguageSelector <LanguageSelector
triggerClassName="w-full" triggerClassName="flex-1"
onOpenChange={setLanguageSelectorOpen} onOpenChange={setLanguageSelectorOpen}
/> />
<ToggleGroup <Button
type="single" variant="outline"
value={theme} size="icon"
onValueChange={(value) => { onClick={() =>
if (value) setTheme(value); setTheme(
}} theme === 'light'
className="w-full justify-start" ? 'dark'
: theme === 'dark'
? 'system'
: 'light',
)
}
className="h-9 w-9 shrink-0"
> >
<ToggleGroupItem value="light" size="sm"> {theme === 'light' && <Sun className="h-[1.2rem] w-[1.2rem]" />}
<Sun className="h-4 w-4" /> {theme === 'dark' && <Moon className="h-[1.2rem] w-[1.2rem]" />}
</ToggleGroupItem> {theme === 'system' && (
<ToggleGroupItem value="dark" size="sm"> <Monitor className="h-[1.2rem] w-[1.2rem]" />
<Moon className="h-4 w-4" /> )}
</ToggleGroupItem> </Button>
<ToggleGroupItem value="system" size="sm"> </div>
<Monitor className="h-4 w-4" />
</ToggleGroupItem>
</ToggleGroup>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<Button <Button
web/src/components/ui/theme-toggle.tsx
+9 -4
View File
@@ -1,7 +1,7 @@
'use client'; 'use client';
import * as React from 'react'; import * as React from 'react';
import { Moon, Sun } from 'lucide-react'; import { Moon, Sun, Monitor } from 'lucide-react';
import { useTheme } from 'next-themes'; import { useTheme } from 'next-themes';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
@@ -13,11 +13,16 @@ export function ThemeToggle() {
<Button <Button
variant="outline" variant="outline"
size="icon" size="icon"
onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')} onClick={() =>
setTheme(
theme === 'light' ? 'dark' : theme === 'dark' ? 'system' : 'light',
)
}
className="h-9 w-9" className="h-9 w-9"
> >
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" /> {theme === 'light' && <Sun className="h-[1.2rem] w-[1.2rem]" />}
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" /> {theme === 'dark' && <Moon className="h-[1.2rem] w-[1.2rem]" />}
{theme === 'system' && <Monitor className="h-[1.2rem] w-[1.2rem]" />}
</Button> </Button>
); );
} }