| 1 | import { Moon, Sun } from "lucide-react"; |
| 2 | import clsx from "clsx"; |
| 3 | import { Button } from "@/components/ui/button"; |
| 4 | import { useTheme } from "@/components/ThemeProvider"; |
| 5 | |
| 6 | interface ThemeToggleButtonProps { |
| 7 | className?: string; |
| 8 | } |
| 9 | |
| 10 | export function ThemeToggleButton({ className }: ThemeToggleButtonProps) { |
| 11 | const { theme, toggleTheme } = useTheme(); |
| 12 | const nextTheme = theme === "dark" ? "light" : "dark"; |
| 13 | |
| 14 | return ( |
| 15 | <Button |
| 16 | type="button" |
| 17 | variant="outline" |
| 18 | size="icon" |
| 19 | onClick={toggleTheme} |
| 20 | className={clsx( |
| 21 | "h-12 w-12 cursor-pointer rounded-md border-border/70 bg-background/90 text-foreground shadow-sm transition-colors hover:border-primary/40 hover:bg-background hover:text-primary", |
| 22 | className |
| 23 | )} |
| 24 | aria-label={`Switch to ${nextTheme} theme`} |
| 25 | title={theme === "dark" ? "Light theme" : "Dark theme"} |
| 26 | > |
| 27 | {theme === "dark" ? ( |
| 28 | <Sun className="h-5.5 w-5.5" /> |
| 29 | ) : ( |
| 30 | <Moon className="h-5.5 w-5.5" /> |
| 31 | )} |
| 32 | </Button> |
| 33 | ); |
| 34 | } |