components/search.js

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);