components/calendar-header.js

class CustomCalendarHeader extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    background: white;
                    border-bottom: 1px solid #e5e7eb;
                }
                
                .header-content {
                    padding: 1rem 1.5rem;
                }
                
                .action-buttons {
                    display: flex;
                    gap: 0.5rem;
                    align-items: center;
                }
                
                .btn {
                    padding: 0.5rem 1rem;
                    border-radius: 0.375rem;
                    font-size: 0.875rem;
                    font-weight: 500;
                    transition: all 0.2s;
                    cursor: pointer;
                }
                
                .btn-primary {
                    background: #0ea5e9;
                    color: white;
                    border: none;
                }
                
                .btn-primary:hover {
                    background: #0284c7;
                }
                
                .btn-outline {
                    background: white;
                    color: #374151;
                    border: 1px solid #d1d5db;
                }
                
                .btn-outline:hover {
                    background: #f9fafb;
                    border-color: #9ca3af;
                }
            </style>
            <div class="header-content">
                <div class="flex justify-between items-center">
                    <div class="flex items-center space-x-4">
                        <h2 class="text-xl font-semibold text-gray-800" id="calendar-title">This Week</h2>
                        <div class="text-sm text-gray-500">Showing 5 days, 4 team members</div>
                        <div class="flex items-center space-x-2">
                            <label class="inline-flex items-center">
                                <input type="checkbox" class="rounded border-gray-300 text-primary-600 focus:ring-primary-500" id="show-weekends">
                                <span class="ml-2 text-sm text-gray-700">Weekends</span>
                            </label>
                            <label class="inline-flex items-center">
                                <input type="checkbox" class="rounded border-gray-300 text-primary-600 focus:ring-primary-500" id="show-holidays">
                                <span class="ml-2 text-sm text-gray-700">Holidays</span>
                            </label>
                            <button class="btn btn-outline flex items-center space-x-2" id="add-member-btn">
                                <i data-feather="plus"></i>
                                <span>Add Member</span>
                            </button>
                        </div>
                    </div>
<div class="action-buttons">
                        <button class="btn btn-outline flex items-center space-x-2">
                            <i data-feather="users"></i>
                            <span>Team</span>
                        </button>
                        
                        <button class="btn btn-outline flex items-center space-x-2">
                            <i data-feather="download"></i>
                            <span>Export</span>
                        </button>
                        
                        <button class="btn btn-primary flex items-center space-x-2">
                            <i data-feather="plus"></i>
                            <span>Add Member</span>
                        </button>
                    </div>
                </div>
            </div>
        `;
        
        // Initialize feather icons
        if (typeof feather !== 'undefined') {
            feather.replace();
        }
    }
}

customElements.define('custom-calendar-header', CustomCalendarHeader);