Function Header

src/components/Header.tsx:11–33

({ theme, toggleTheme })

}

const Header: React.FC<HeaderProps> = ({ theme, toggleTheme }) => {
  return (
    <header className="w-full border-b border-gray-200 dark:border-gray-700 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm fixed top-0 left-0 z-50">
      <div className="max-w-5xl mx-auto px-4 py-4 flex items-center justify-between">
        <Link to="/" className="flex items-center gap-3">
          <div className="w-12 h-12 rounded-lg bg-blue-500/10 dark:bg-blue-400/10 flex items-center justify-center">
            <img src={tinyWebPLogo} alt='TinyWebP Logo' className='w-10 h-10'/>
          </div>
          <span className="text-xl font-semibold text-gray-900 dark:text-white">
            TinyWebP
          </span>
        </Link>
        <button
          onClick={toggleTheme}
          className="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
          aria-label="Toggle theme"
        >
          {theme === 'light' ? <Moon className="w-6 h-6" /> : <Sun className="w-6 h-6" />}
        </button>
      </div>
    </header>
  );
};

export default Header;