GamiDPC/securewin-shell

1class AppIcon extends HTMLElement {2    constructor() {3        super();4        this.attachShadow({ mode: 'open' });5    }6 7    connectedCallback() {8        const name = this.getAttribute('name') || 'App';9        const icon = this.getAttribute('icon') || 'grid';10        11        this.shadowRoot.innerHTML = `12            <style>13                :host {14                    display: flex;15                    flex-direction: column;16                    align-items: center;17                    cursor: pointer;18                    transition: all 0.2s ease;19                }20                :host(:hover) {21                    background-color: rgba(43, 87, 154, 0.1);22                }23                24                .icon-container {25                    width: 80px;26                    height: 80px;27                    background-color: rgba(43, 87, 154, 0.2);28                    border-radius: 0.5rem;29                    display: flex;30                    align-items: center;31                    justify-content: center;32                    margin-bottom: 0.5rem;33                }34                35                .icon {36                    width: 40px;37                    height: 40px;38                }39                40                .name {41                    text-align: center;42                    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;43                }44            </style>45            <div class="icon-container">46                <i data-feather="${icon}" class="icon"></i>47            </div>48            <span class="name">${name}</span>49        `;50        51        // Initialize Feather Icons52        feather.replace();53    }54}55 56customElements.define('app-icon', AppIcon);