components/editor-toolbar.js

class CustomEditorToolbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .tool-btn {
                    transition: all 0.2s ease;
                }
                .tool-btn:hover {
                    transform: translateY(-2px);
                    background-color: rgba(255,255,255,0.2);
                }
            </style>
            <div class="flex items-center justify-between">
                <div class="flex space-x-2">
                    <button id="upload-btn" class="tool-btn px-3 py-2 rounded-md flex items-center">
                        <i data-feather="upload" class="mr-2"></i>
                        Upload
                    </button>
                    <button class="tool-btn px-3 py-2 rounded-md flex items-center">
                        <i data-feather="camera" class="mr-2"></i>
                        Capture
                    </button>
                    <button class="tool-btn px-3 py-2 rounded-md flex items-center">
                        <i data-feather="download" class="mr-2"></i>
                        Export
                    </button>
                </div>
                
                <div class="flex space-x-2">
                    <button class="tool-btn p-2 rounded-md">
                        <i data-feather="crop"></i>
                    </button>
                    <button class="tool-btn p-2 rounded-md">
                        <i data-feather="sliders"></i>
                    </button>
                    <button class="tool-btn p-2 rounded-md">
                        <i data-feather="edit"></i>
                    </button>
                    <button class="tool-btn p-2 rounded-md">
                        <i data-feather="type"></i>
                    </button>
                </div>
            </div>
        `;
    }
}
customElements.define('custom-editor-toolbar', CustomEditorToolbar);