Spaces:
Running
Running
File size: 2,099 Bytes
abc8a56 48ca600 abc8a56 48ca600 abc8a56 48ca600 abc8a56 | 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 | class SearchComponent extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.search-input {
color: #f8fafc;
}
.search-input::placeholder {
color: #64748b;
}
.search-input:focus {
outline: 2px solid var(--primary-500);
outline-offset: 2px;
}
.category-btn {
color: #cbd5e1;
background-color: #1e293b;
}
.category-btn:hover {
background-color: #334155;
color: var(--primary-500);
}
</style>
<div class="mb-12 max-w-2xl mx-auto">
<div class="relative">
<input
type="text"
placeholder="Search for tools..."
class="search-input w-full bg-gray-800 border border-gray-700 rounded-full py-3 px-6 pl-12 text-gray-200 focus:border-primary-500 focus:ring-0"
>
<i data-feather="search" class="absolute left-4 top-3.5 text-gray-500"></i>
</div>
<div class="flex flex-wrap justify-center mt-4 gap-2">
<button class="px-4 py-1.5 rounded-full bg-gray-800 hover:bg-gray-700 text-sm">All</button>
<button class="px-4 py-1.5 rounded-full bg-gray-800 hover:bg-gray-700 text-sm">Developer</button>
<button class="px-4 py-1.5 rounded-full bg-gray-800 hover:bg-gray-700 text-sm">Media</button>
<button class="px-4 py-1.5 rounded-full bg-gray-800 hover:bg-gray-700 text-sm">Documents</button>
<button class="px-4 py-1.5 rounded-full bg-gray-800 hover:bg-gray-700 text-sm">Utilities</button>
</div>
</div>
`;
}
}
customElements.define('search-component', SearchComponent); |