components/code-visualizer.js

class CodeVisualizer extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    margin: 1rem 0;
                }
                .visualizer-container {
                    background-color: white;
                    border-radius: 0.5rem;
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                    padding: 1.5rem;
                }
                .visualizer-title {
                    font-size: 1.25rem;
                    font-weight: 600;
                    color: #4a5568;
                    margin-bottom: 1rem;
                    display: flex;
                    align-items: center;
                }
                .visualizer-icon {
                    margin-right: 0.5rem;
                    color: #9f7aea;
                }
                .code-block {
                    font-family: 'Courier New', monospace;
                    background-color: #f7fafc;
                    padding: 1rem;
                    border-radius: 0.25rem;
                    overflow-x: auto;
                }
            </style>
            <div class="visualizer-container">
                <div class="visualizer-title">
                    <i data-feather="code" class="visualizer-icon"></i>
                    <slot name="title">Code Visualizer</slot>
                </div>
                <div class="code-block">
                    <slot></slot>
                </div>
            </div>
        `;
        
        // Replace feather icons after content is loaded
        setTimeout(() => {
            if (window.feather) {
                window.feather.replace();
            }
        }, 100);
    }
}

customElements.define('code-visualizer', CodeVisualizer);