xinyin025/LangBot
1
0
Fork 0
mirror of https://github.com/langbot-app/LangBot.git synced 2026-06-02 03:55:55 +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

49
web/src/app/home/components/home-sidebar/HomeSidebar.tsx
View File

@@ -29,7 +29,6 @@ import {
PopoverTrigger,
} from '@/components/ui/popover';
import { Button } from '@/components/ui/button';
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
import { LanguageSelector } from '@/components/ui/language-selector';
import { Badge } from '@/components/ui/badge';
import AccountSettingsDialog from '@/app/home/components/account-settings-dialog/AccountSettingsDialog';
@@ -376,28 +375,32 @@ export default function HomeSidebar({
</span>
</div>
<LanguageSelector
triggerClassName="w-full"
onOpenChange={setLanguageSelectorOpen}
/>
<ToggleGroup
type="single"
value={theme}
onValueChange={(value) => {
if (value) setTheme(value);
}}
className="w-full justify-start"
>
<ToggleGroupItem value="light" size="sm">
<Sun className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="dark" size="sm">
<Moon className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="system" size="sm">
<Monitor className="h-4 w-4" />
</ToggleGroupItem>
</ToggleGroup>
<div className="flex items-center gap-2">
<LanguageSelector
triggerClassName="flex-1"
onOpenChange={setLanguageSelectorOpen}
/>
<Button
variant="outline"
size="icon"
onClick={() =>
setTheme(
theme === 'light'
? 'dark'
: theme === 'dark'
? 'system'
: 'light',
)
}
className="h-9 w-9 shrink-0"
>
{theme === 'light' && <Sun className="h-[1.2rem] w-[1.2rem]" />}
{theme === 'dark' && <Moon className="h-[1.2rem] w-[1.2rem]" />}
{theme === 'system' && (
<Monitor className="h-[1.2rem] w-[1.2rem]" />
)}
</Button>
</div>
<div className="flex flex-col gap-1">
<Button

13
web/src/components/ui/theme-toggle.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
import { Moon, Sun } from 'lucide-react';
import { Moon, Sun, Monitor } from 'lucide-react';
import { useTheme } from 'next-themes';
import { Button } from '@/components/ui/button';
@@ -13,11 +13,16 @@ export function ThemeToggle() {
<Button
variant="outline"
size="icon"
onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
onClick={() =>
setTheme(
theme === 'light' ? 'dark' : theme === 'dark' ? 'system' : 'light',
)
}
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" />
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
{theme === 'light' && <Sun className="h-[1.2rem] w-[1.2rem]" />}
{theme === 'dark' && <Moon className="h-[1.2rem] w-[1.2rem]" />}
{theme === 'system' && <Monitor className="h-[1.2rem] w-[1.2rem]" />}
</Button>
);
}