initial commit

components/theme-toggle.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import { Moon, Sun } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { useTheme } from '@/components/theme-provider'
+import { useEffect, useState } from 'react'
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return (
+      <Button variant="ghost" size="icon" disabled>
+        <Sun className="h-5 w-5" />
+        <span className="sr-only">Toggle theme</span>
+      </Button>
+    )
+  }
+
+  const toggleTheme = () => {
+    if (theme === 'system') {
+      // If system, first switch to light/dark based on current system preference
+      const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+      setTheme(isDark ? 'light' : 'dark')
+    } else {
+      setTheme(theme === 'light' ? 'dark' : 'light')
+    }
+  }
+
+  const getIcon = () => {
+    if (theme === 'system') {
+      const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+      return isDark ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />
+    }
+    return theme === 'light' ? <Moon className="h-5 w-5" /> : <Sun className="h-5 w-5" />
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={toggleTheme}
+      title={`Switch to ${theme === 'light' ? 'dark' : 'light'} theme`}
+    >
+      {getIcon()}
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+}