components/header.html

<header class="bg-black bg-opacity-50 border-b border-gray-800 p-4">
    <div class="flex justify-between items-center">
        <div class="flex items-center">
            <button class="md:hidden mr-4">
                <i data-feather="menu" class="h-6 w-6"></i>
            </button>
            <h1 class="text-xl font-bold">${pageTitle}</h1>
        </div>
        <div class="flex items-center">
            <div class="relative">
                <input type="text" placeholder="Search your library..." class="bg-gray-800 px-4 py-2 rounded-full text-sm w-64 focus:outline-none focus:ring-2 focus:ring-green-500">
                <i data-feather="search" class="absolute right-3 top-2.5 h-4 w-4 text-gray-400"></i>
            </div>
            <div class="ml-6 flex items-center">
                <img src="http://static.photos/people/40x40/1" alt="User" class="h-8 w-8 rounded-full">
                <span class="ml-2 text-sm font-medium">John Doe</span>
            </div>
        </div>
    </div>
</header>