BREAKING: postgres + saas

components/sidebar/theme-toggle.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+import { useEffect, useState } from "react"
+
+export const ThemeToggle = () => {
+  const { theme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  // Ensure component is mounted to avoid hydration mismatch
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return null
+  }
+
+  const toggleTheme = () => {
+    if (theme === "dark") {
+      setTheme("light")
+    } else {
+      setTheme("dark")
+    }
+  }
+
+  return (
+    <div onClick={toggleTheme} className="flex items-center gap-2 cursor-pointer">
+      {theme === "dark" ? (
+        <>
+          <Sun className="h-4 w-4" />
+          Light Mode
+        </>
+      ) : (
+        <>
+          <Moon className="h-4 w-4" />
+          Dark Mode
+        </>
+      )}
+    </div>
+  )
+}