Spaces:
Running
Running
File size: 2,755 Bytes
6759add |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
class CustomHeader extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.search-input:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
</style>
<div class="border-b border-gray-200 bg-white">
<div class="px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16 items-center">
<!-- Search bar -->
<div class="flex-1 flex">
<div class="flex-1 max-w-xs">
<div class="relative focus-within:z-10">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i data-feather="search" class="h-5 w-5 text-gray-400"></i>
</div>
<input class="search-input block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:placeholder-gray-400 sm:text-sm" placeholder="Search" type="search">
</div>
</div>
</div>
<!-- Right side icons -->
<div class="ml-4 flex items-center md:ml-6">
<button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
<span class="sr-only">View notifications</span>
<i data-feather="bell" class="h-6 w-6"></i>
</button>
<!-- Profile dropdown -->
<div class="ml-3 relative">
<div>
<button class="max-w-xs bg-white flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500" id="user-menu">
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/42" alt="">
</button>
</div>
</div>
</div>
</div>
</div>
</div>
`;
}
}
customElements.define('custom-header', CustomHeader); |