heimoshuiyu/chatgpt-api-web
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: replace DropdownMenu with Select component in ModeToggle for improved theme selection

Browse Source
This commit is contained in:
ecwu
2025-01-04 23:29:20 +08:00
parent 236d48e72d
commit 503bf6a9bb
4 changed files with 25 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/ModeToggle.tsx
View File

@@ -7,31 +7,33 @@ import {
DropdownMenuItem, DropdownMenuItem,
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { useTheme } from "@/components/ThemeProvider"; import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { useTheme, Theme } from "@/components/ThemeProvider";
export function ModeToggle() { export function ModeToggle() {
const { setTheme } = useTheme(); const { setTheme } = useTheme();
return ( return (
<DropdownMenu> <Select onValueChange={(value) => setTheme(value as Theme)}>
<DropdownMenuTrigger asChild> <SelectTrigger className="w-full">
<Button variant="outline" size="icon"> <SelectValue placeholder="Select theme" />
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" /> </SelectTrigger>
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" /> <SelectContent>
<span className="sr-only">Toggle theme</span> <SelectGroup>
</Button> <SelectLabel>Theme</SelectLabel>
</DropdownMenuTrigger> <SelectItem value="light">Light</SelectItem>
<DropdownMenuContent align="end"> <SelectItem value="dark">Dark</SelectItem>
<DropdownMenuItem onClick={() => setTheme("light")}> <SelectItem value="system">System</SelectItem>
Light </SelectGroup>
</DropdownMenuItem> </SelectContent>
<DropdownMenuItem onClick={() => setTheme("dark")}> </Select>
Dark
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("system")}>
System
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
); );
} }

2
src/components/ThemeProvider.tsx
View File

@@ -1,6 +1,6 @@
import { createContext, useContext, useEffect, useState } from "react"; import { createContext, useContext, useEffect, useState } from "react";
type Theme = "dark" | "light" | "system"; export type Theme = "dark" | "light" | "system";
type ThemeProviderProps = { type ThemeProviderProps = {
children: React.ReactNode; children: React.ReactNode;

2
src/components/navbar.tsx
View File

@@ -14,7 +14,6 @@ import {
PopoverContent, PopoverContent,
PopoverTrigger, PopoverTrigger,
} from "@/components/ui/popover"; } from "@/components/ui/popover";
import { ModeToggle } from "@/components/ModeToggle";
import { SidebarTrigger } from "@/components/ui/sidebar"; import { SidebarTrigger } from "@/components/ui/sidebar";
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
import { import {
@@ -130,7 +129,6 @@ const Navbar: React.FC = () => {
</Menubar> </Menubar>
</div> </div>
</div> </div>
<ModeToggle />
</div> </div>
</div> </div>
<div className="flex ml-auto gap-2 px-3"> <div className="flex ml-auto gap-2 px-3">

1
src/pages/App.tsx
View File

@@ -414,6 +414,7 @@ export function App() {
</SidebarGroup> </SidebarGroup>
</SidebarContent> </SidebarContent>
<SidebarFooter> <SidebarFooter>
<ModeToggle />
<AlertDialog> <AlertDialog>
<AlertDialogTrigger asChild> <AlertDialogTrigger asChild>
<Button variant="destructive">{Tr("DEL")}</Button> <Button variant="destructive">{Tr("DEL")}</Button>