Lokrosh/chatty-mcbotface

1 2<script>3document.addEventListener('DOMContentLoaded', function() {4    class HeaderComponent extends HTMLElement {5        connectedCallback() {6            this.innerHTML = `7                <header class="bg-white shadow-sm py-4">8<div class="container mx-auto px-4 flex items-center justify-between">9                        <div class="flex items-center space-x-2">10                            <i data-feather="message-square" class="text-purple-600"></i>11                            <h1 class="text-xl font-bold text-gray-800">Chatty McBotFace</h1>12                        </div>13                        <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 transition">14                            <i data-feather="moon" class="text-gray-700"></i>15                        </button>16                    </div>17                </header>18            `;19            20            // Initialize theme toggle21            const themeToggle = this.querySelector('#theme-toggle');22            if (themeToggle) {23                themeToggle.addEventListener('click', () => {24                    document.documentElement.classList.toggle('dark');25                    const icon = this.querySelector('#theme-toggle i');26                    if (document.documentElement.classList.contains('dark')) {27                        feather.icons['sun'].replace(icon);28                        document.body.classList.add('bg-gray-900');29                        document.body.classList.remove('bg-gray-100');30                    } else {31                        feather.icons['moon'].replace(icon);32                        document.body.classList.add('bg-gray-100');33                        document.body.classList.remove('bg-gray-900');34                    }35                });36            }37            38            feather.replace();39        }40    }41    42    if (!customElements.get('header-component')) {43        customElements.define('header-component', HeaderComponent);44    }45});46</script>47