diff options
Diffstat (limited to 'frontend/src/components/theme-toggle.tsx')
| -rw-r--r-- | frontend/src/components/theme-toggle.tsx | 50 |
1 files changed, 50 insertions, 0 deletions
diff --git a/frontend/src/components/theme-toggle.tsx b/frontend/src/components/theme-toggle.tsx new file mode 100644 index 0000000..17df44e --- /dev/null +++ b/frontend/src/components/theme-toggle.tsx @@ -0,0 +1,50 @@ +"use client" + +import * as React from "react" +import { Moon, Sun, Monitor } from "lucide-react" +import { useTheme } from "next-themes" + +import { Button } from "@/components/ui/button" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu" + +export function ThemeToggle() { + const { setTheme, theme } = useTheme() + + return ( + <DropdownMenu> + <DropdownMenuTrigger asChild> + <Button + variant="ghost" + size="icon" + className="nav-button-transparent backdrop-blur-sm" + > + <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" /> + <span className="sr-only">Toggle theme</span> + </Button> + </DropdownMenuTrigger> + <DropdownMenuContent align="end" className="nav-dropdown-transparent"> + <DropdownMenuItem onClick={() => setTheme("light")} className="flex items-center gap-2 nav-dropdown-item"> + <Sun className="h-4 w-4" /> + Light + {theme === "light" && <span className="ml-auto text-xs">✓</span>} + </DropdownMenuItem> + <DropdownMenuItem onClick={() => setTheme("dark")} className="flex items-center gap-2 nav-dropdown-item"> + <Moon className="h-4 w-4" /> + Dark + {theme === "dark" && <span className="ml-auto text-xs">✓</span>} + </DropdownMenuItem> + <DropdownMenuItem onClick={() => setTheme("system")} className="flex items-center gap-2 nav-dropdown-item"> + <Monitor className="h-4 w-4" /> + System + {theme === "system" && <span className="ml-auto text-xs">✓</span>} + </DropdownMenuItem> + </DropdownMenuContent> + </DropdownMenu> + ) +}
\ No newline at end of file |