components/code-editor.js

class CodeEditor extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          margin: 2rem 0;
        }
        .editor-container {
          border-radius: 0.5rem;
          overflow: hidden;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .editor-header {
          background: #2d3748;
          padding: 0.5rem 1rem;
          display: flex;
          align-items: center;
          color: white;
        }
        .editor-header-title {
          font-family: 'Inter', sans-serif;
          font-size: 0.875rem;
          font-weight: 500;
        }
        .editor-body {
          background: #1a202c;
          padding: 1rem;
          font-family: 'Fira Code', monospace;
          color: #e2e8f0;
          min-height: 200px;
          max-height: 400px;
          overflow-y: auto;
        }
        .line-numbers {
          color: #718096;
          user-select: none;
          margin-right: 1rem;
        }
        .code-line {
          display: flex;
          margin-bottom: 0.5rem;
        }
        .keyword {
          color: #f687b3;
        }
        .string {
          color: #68d391;
        }
        .comment {
          color: #718096;
          font-style: italic;
        }
        .number {
          color: #f6ad55;
        }
        .function {
          color: #63b3ed;
        }
      </style>
      <div class="editor-container">
        <div class="editor-header">
          <span class="editor-header-title">code.js</span>
        </div>
        <div class="editor-body">
          <div class="code-line"><span class="line-numbers">1</span> <span class="keyword">const</span> <span class="function">encodeMessage</span> = (<span class="keyword">message</span>) => {</div>
          <div class="code-line"><span class="line-numbers">2</span>   <span class="keyword">return</span> <span class="function">btoa</span>(<span class="function">encodeURIComponent</span>(<span class="keyword">message</span>));</div>
          <div class="code-line"><span class="line-numbers">3</span> };</div>
          <div class="code-line"><span class="line-numbers">4</span>&nbsp;</div>
          <div class="code-line"><span class="line-numbers">5</span> <span class="keyword">const</span> <span class="function">decodeMessage</span> = (<span class="keyword">encoded</span>) => {</div>
          <div class="code-line"><span class="line-numbers">6</span>   <span class="keyword">try</span> {</div>
          <div class="code-line"><span class="line-numbers">7</span>     <span class="keyword">return</span> <span class="function">decodeURIComponent</span>(<span class="function">atob</span>(<span class="keyword">encoded</span>));</div>
          <div class="code-line"><span class="line-numbers">8</span>   } <span class="keyword">catch</span> (<span class="keyword">e</span>) {</div>
          <div class="code-line"><span class="line-numbers">9</span>     <span class="keyword">return</span> <span class="string">"Invalid encoding"</span>;</div>
          <div class="code-line"><span class="line-numbers">10</span>   }</div>
          <div class="code-line"><span class="line-numbers">11</span> };</div>
          <div class="code-line"><span class="line-numbers">12</span>&nbsp;</div>
          <div class="code-line"><span class="line-numbers">13</span> <span class="comment">// Example usage:</span></div>
          <div class="code-line"><span class="line-numbers">14</span> <span class="keyword">const</span> <span class="keyword">secret</span> = <span class="string">"Hello World!"</span>;</div>
          <div class="code-line"><span class="line-numbers">15</span> <span class="keyword">const</span> <span class="keyword">encoded</span> = <span class="function">encodeMessage</span>(<span class="keyword">secret</span>);</div>
          <div class="code-line"><span class="line-numbers">16</span> <span class="keyword">const</span> <span class="keyword">decoded</span> = <span class="function">decodeMessage</span>(<span class="keyword">encoded</span>);</div>
        </div>
      </div>
    `;
  }
}
customElements.define('code-editor', CodeEditor);