components/Header.jsx

javascript
const Header = () => {
  return (
    <header className="bg-white shadow-sm p-4">
      <div className="flex justify-between items-center">
        <div className="flex items-center">
          <h2 className="text-lg font-semibold text-gray-800">Dashboard Overview</h2>
        </div>
        <div className="flex items-center space-x-4">
          <div className="relative">
            <i data-feather="search" className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            <input
              type="text"
              placeholder="Search..."
              className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-200"
            />
          </div>
          <button className="p-2 rounded-full bg-gray-100 hover:bg-gray-200">
            <i data-feather="bell"></i>
          </button>
          <div className="flex items-center">
            <img 
              src="http://static.photos/people/200x200/42" 
              alt="Profile" 
              className="w-8 h-8 rounded-full mr-2"
            />
            <span className="text-sm font-medium text-gray-700">Admin</span>
          </div>
        </div>
      </div>
    </header>
  );
};

export default Header;

</html>