| 1 | "use client" |
| 2 | |
| 3 | import { useTheme } from "next-themes" |
| 4 | |
| 5 | export function ModeToggle() { |
| 6 | const { setTheme, theme } = useTheme() |
| 7 | |
| 8 | return ( |
| 9 | <button |
| 10 | onClick={() => setTheme(theme === "light" ? "dark" : "light")} |
| 11 | className="border rounded-md w-6 h-6 flex items-center justify-center"> |
| 12 | <span className="sr-only">Toggle mode</span> |
| 13 | {theme !== "dark" ? ( |
| 14 | <svg |
| 15 | xmlns="http://www.w3.org/2000/svg" |
| 16 | fill="none" |
| 17 | viewBox="0 0 24 24" |
| 18 | strokeWidth={1.5} |
| 19 | stroke="currentColor" |
| 20 | className="w-4 h-4"> |
| 21 | <path |
| 22 | strokeLinecap="round" |
| 23 | strokeLinejoin="round" |
| 24 | d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" |
| 25 | /> |
| 26 | </svg> |
| 27 | ) : ( |
| 28 | <svg |
| 29 | xmlns="http://www.w3.org/2000/svg" |
| 30 | fill="none" |
| 31 | viewBox="0 0 24 24" |
| 32 | strokeWidth={1.5} |
| 33 | stroke="currentColor" |
| 34 | className="w-4 h-4"> |
| 35 | <path |
| 36 | strokeLinecap="round" |
| 37 | strokeLinejoin="round" |
| 38 | d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" |
| 39 | /> |
| 40 | </svg> |
| 41 | )} |
| 42 | </button> |
| 43 | ) |
| 44 | } |