components/template-picker.js

class TemplatePicker extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                }
                
                .template-picker {
                    background-color: white;
                    border-radius: 0.75rem;
                    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
                    padding: 1.5rem;
                }
                
                .template-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 1rem;
                }
                
                .template-grid {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 1rem;
                }
                
                .template-card {
                    border-radius: 0.5rem;
                    overflow: hidden;
                    cursor: pointer;
                    border: 1px solid #e2e8f0;
                }
                
                .template-image {
                    aspect-ratio: 16/9;
                    background-color: #f8fafc;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #94a3b8;
                }
                
                .template-label {
                    padding: 0.5rem;
                    text-align: center;
                    font-size: 0.875rem;
                    color: #64748b;
                    background-color: #f8fafc;
                }
                
                .view-all {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-top: 1rem;
                    color: #6366f1;
                    font-weight: 500;
                    cursor: pointer;
                }
                
                .view-all i {
                    margin-left: 0.25rem;
                }
            </style>
            <div class="template-picker">
                <div class="template-header">
                    <h3 class="text-xl font-bold">Templates</h3>
                    <button class="text-indigo-600 text-sm font-medium">See all</button>
                </div>
                
                <div class="template-grid">
                    <div class="template-card">
                        <div class="template-image">
                            <i data-feather="layout" class="w-8 h-8"></i>
                        </div>
                        <div class="template-label">Professional</div>
                    </div>
                    <div class="template-card">
                        <div class="template-image">
                            <i data-feather="layout" class="w-8 h-8"></i>
                        </div>
                        <div class="template-label">Creative</div>
                    </div>
                    <div class="template-card">
                        <div class="template-image">
                            <i data-feather="layout" class="w-8 h-8"></i>
                        </div>
                        <div class="template-label">Minimal</div>
                    </div>
                    <div class="template-card">
                        <div class="template-image">
                            <i data-feather="layout" class="w-8 h-8"></i>
                        </div>
                        <div class="template-label">Dark</div>
                    </div>
                </div>
                
                <div class="view-all">
                    <span>View all templates</span>
                    <i data-feather="chevron-right" class="w-4 h-4"></i>
                </div>
            </div>
        `;
    }
}

customElements.define('template-picker', TemplatePicker);