| class FigmaImporter extends HTMLElement { |
| constructor() { |
| super(); |
| this.attachShadow({ mode: 'open' }); |
| } |
|
|
| connectedCallback() { |
| this.shadowRoot.innerHTML = ` |
| <style> |
| .importer-container { |
| padding: 2rem; |
| background: #f8fafc; |
| border-radius: 0.5rem; |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1); |
| } |
| .dropzone { |
| border: 2px dashed #cbd5e1; |
| border-radius: 0.5rem; |
| padding: 3rem; |
| text-align: center; |
| cursor: pointer; |
| transition: all 0.2s; |
| } |
| .dropzone:hover { |
| border-color: #6366f1; |
| } |
| .btn-primary { |
| background: #6366f1; |
| color: white; |
| padding: 0.75rem 1.5rem; |
| border-radius: 0.5rem; |
| border: none; |
| cursor: pointer; |
| font-weight: 500; |
| transition: all 0.2s; |
| } |
| .btn-primary:hover { |
| background: #4f46e5; |
| } |
| </style> |
| <div class="importer-container"> |
| <div class="dropzone" id="dropzone"> |
| <i data-feather="upload-cloud" class="w-12 h-12 mb-4 mx-auto text-gray-400"></i> |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Drop Figma file here</h3> |
| <p class="text-gray-500 mb-4">or click to browse files</p> |
| <button class="btn-primary">Import Design</button> |
| </div> |
| </div> |
| `; |
| this.setupDropzone(); |
| } |
|
|
| setupDropzone() { |
| const dropzone = this.shadowRoot.getElementById('dropzone'); |
| |
| dropzone.addEventListener('click', () => { |
| this.importFromFigma(); |
| }); |
|
|
| dropzone.addEventListener('dragover', (e) => { |
| e.preventDefault(); |
| dropzone.style.borderColor = '#6366f1'; |
| dropzone.style.backgroundColor = '#eef2ff'; |
| }); |
|
|
| dropzone.addEventListener('dragleave', () => { |
| dropzone.style.borderColor = '#cbd5e1'; |
| dropzone.style.backgroundColor = 'transparent'; |
| }); |
|
|
| dropzone.addEventListener('drop', (e) => { |
| e.preventDefault(); |
| dropzone.style.borderColor = '#cbd5e1'; |
| dropzone.style.backgroundColor = 'transparent'; |
| |
| const file = e.dataTransfer.files[0]; |
| if (file) { |
| this.processFigmaFile(file); |
| } |
| }); |
| } |
|
|
| importFromFigma() { |
| |
| console.log('Connecting to Figma API...'); |
| } |
|
|
| processFigmaFile(file) { |
| |
| console.log('Processing Figma file:', file.name); |
| } |
| } |
|
|
| customElements.define('figma-importer', FigmaImporter); |
