`components/ThemeToggle.tsx`

30 lines
'use client'

import { FaSun, FaMoon } from 'react-icons/fa'
import { useTheme } from './ThemeProvider'

interface ThemeToggleProps {
  className?: string
}

export default function ThemeToggle({ className = '' }: ThemeToggleProps) {
  const { theme, toggleTheme } = useTheme()
  const isDark = theme === 'dark'

  return (
    <button
      onClick={toggleTheme}
      className={`p-2 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 ${className}`}
      aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
      aria-pressed={isDark}
      type="button"
    >
      {isDark ? (
        <FaSun className="w-5 h-5 text-yellow-500" aria-hidden="true" />
      ) : (
        <FaMoon className="w-5 h-5 text-gray-600" aria-hidden="true" />
      )}
    </button>
  )
}