components/slide-editor.js

class SlideEditor extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                }
                
                .editor-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 1rem;
                }
                
                .slide-container {
                    background-color: white;
                    border-radius: 0.75rem;
                    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
                    padding: 1.5rem;
                }
                
                .slide-toolbar {
                    display: flex;
                    gap: 0.5rem;
                    margin-bottom: 1rem;
                }
                
                .tool-button {
                    padding: 0.5rem;
                    border-radius: 0.375rem;
                    background-color: #f1f5f9;
                    color: #64748b;
                    cursor: pointer;
                    transition: all 0.2s;
                }
                
                .tool-button:hover {
                    background-color: #e2e8f0;
                    color: #475569;
                }
                
                .tool-button.active {
                    background-color: #6366f1;
                    color: white;
                }
                
                .slide-content {
                    min-height: 400px;
                    border: 1px dashed #cbd5e1;
                    border-radius: 0.5rem;
                    padding: 1rem;
                }
                
                .slide-actions {
                    display: flex;
                    justify-content: flex-end;
                    gap: 0.5rem;
                    margin-top: 1rem;
                }
            </style>
            <div class="slide-container">
                <div class="editor-header">
                    <h2 class="text-xl font-bold">Slide Editor</h2>
                    <button class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition duration-200 flex items-center">
                        <i data-feather="plus" class="mr-2"></i> Add Slide
                    </button>
                </div>
                
                <div class="slide-toolbar">
                    <button class="tool-button" title="Text">
                        <i data-feather="type"></i>
                    </button>
                    <button class="tool-button" title="Image">
                        <i data-feather="image"></i>
                    </button>
                    <button class="tool-button" title="Shape">
                        <i data-feather="square"></i>
                    </button>
                    <button class="tool-button" title="Chart">
                        <i data-feather="bar-chart-2"></i>
                    </button>
                    <button class="tool-button" title="Table">
                        <i data-feather="grid"></i>
                    </button>
                </div>
                
                <div class="slide-content" contenteditable="true">
                    <h1 class="text-4xl font-bold mb-4">Presentation Title</h1>
                    <p class="text-xl text-gray-600">Click to edit this text</p>
                </div>
                
                <div class="slide-actions">
                    <button class="tool-button">
                        <i data-feather="copy"></i> Duplicate
                    </button>
                    <button class="tool-button">
                        <i data-feather="trash-2"></i> Delete
                    </button>
                </div>
            </div>
        `;
    }
    
    addSlide() {
        // Implementation for adding a new slide
        console.log('Adding new slide');
    }
}

customElements.define('slide-editor', SlideEditor);