update mode toggle to change on click (no dropdown)

src/components/site-header.tsx

@@ -1,5 +1,5 @@
 import { Link } from '@tanstack/react-router'
-import { ModeToggle } from "@/components/mode-toggle"
+import { ModeToggle } from "@/components/theme/mode-toggle"
 import { Icons } from "@/components/icons"
 import { Button } from "@/components/ui/button"
 import { GraduationCap, Menu } from "lucide-react"

src/components/theme/mode-toggle.tsx

@@ -0,0 +1,19 @@
+import { Moon, Sun } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { useTheme } from "@/components/theme/theme-provider"
+
+export function ModeToggle() {
+  const { theme, setTheme } = useTheme()
+
+  const toggleTheme = () => {
+    setTheme(theme === "dark" ? "light" : "dark")
+  }
+
+  return (
+    <Button variant="outline" size="icon" onClick={toggleTheme}>
+      <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>
+  )
+}

src/main.tsx

@@ -2,7 +2,7 @@ import { StrictMode } from 'react'
 import ReactDOM from 'react-dom/client'
 import './index.css'
 import { RouterProvider, createRouter } from '@tanstack/react-router'
-import { ThemeProvider } from "@/components/theme-provider"
+import { ThemeProvider } from "@/components/theme/theme-provider"
 
 // Import the generated route tree
 import { routeTree } from './routeTree.gen'