tkritsu4/techtube-tutorials

1class CustomHeader extends HTMLElement {2    connectedCallback() {3        this.attachShadow({ mode: 'open' });4        this.shadowRoot.innerHTML = `5            <style>6                header {7                    @apply bg-white shadow-sm;8                }9                .container {10                    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;11                }12                .logo {13                    @apply flex items-center text-xl font-bold text-primary;14                }15                .logo-icon {16                    @apply mr-2;17                }18                nav {19                    @apply flex items-center space-x-8;20                }21                .nav-link {22                    @apply text-gray-700 hover:text-primary transition-colors;23                }24                .user-actions {25                    @apply flex items-center space-x-4;26                }27                .user-icon {28                    @apply w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-600;29                }30            </style>31            <header class="py-4">32                <div class="container flex justify-between items-center">33                    <a href="/" class="logo">34                        <i data-feather="youtube" class="logo-icon"></i>35                        <span>TechTube</span>36                    </a>37                    38                    <nav class="hidden md:flex">39                        <a href="/" class="nav-link">Home</a>40                        <a href="#" class="nav-link">Categories</a>41                        <a href="#" class="nav-link">Library</a>42                        <a href="#" class="nav-link">Saved</a>43                    </nav>44                    45                    <div class="user-actions">46                        <button class="p-2 rounded-full hover:bg-gray-100">47                            <i data-feather="bell"></i>48                        </button>49                        <div class="user-icon">50                            <i data-feather="user"></i>51                        </div>52                    </div>53                </div>54            </header>55            <script>feather.replace();</script>56        `;57    }58}59 60customElements.define('custom-header', CustomHeader);