catalog/ts_web/elements/upl-statuspage-header.ts

import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager, unsafeCSS } from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import { fonts, shadows } from '../styles/shared.styles.js';
import { demoFunc } from './upl-statuspage-header.demo.js';

declare global {
  interface HTMLElementTagNameMap {
    'upl-statuspage-header': UplStatuspageHeader;
  }
}

@customElement('upl-statuspage-header')
export class UplStatuspageHeader extends DeesElement {
  // STATIC
  public static demo = demoFunc;

  // INSTANCE
  @property({ type: String })
  public pageTitle: string = "Statuspage Title";
  
  @property({ type: Boolean })
  public showReportButton: boolean = true;
  
  @property({ type: Boolean })
  public showSubscribeButton: boolean = true;
  
  @property({ type: String })
  public logoUrl: string = '';
  
  @property({ type: Boolean })
  public loading: boolean = false;
  

  constructor() {
    super();
  }

  public static styles = [
    domtools.elementBasic.staticStyles,
    css`
      :host {
          display: block;
          background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
          font-family: ${unsafeCSS(fonts.base)};
          color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
          border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
          position: sticky;
          top: 0;
          z-index: 40;
        }

        .header-container {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 24px;
        }

        .header-nav {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 64px;
        }

        .header-left {
          display: flex;
          align-items: center;
          gap: 24px;
        }

        .header-actions {
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .actionButton {
          font-size: 14px;
          font-weight: 500;
          padding: 8px 12px;
          border-radius: 6px;
          cursor: pointer;
          user-select: none;
          transition: all 0.2s ease;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          height: 36px;
          background: transparent;
          border: none;
          color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
        }

        .actionButton:hover {
          background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
        }

        .site-title {
          font-size: 20px;
          font-weight: 600;
          letter-spacing: -0.02em;
          color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
        }

        .logo {
          height: 24px;
          width: auto;
          filter: ${cssManager.bdTheme('none', 'brightness(0) invert(1)')};
        }
        
        .page-info {
          padding: 48px 0 64px 0;
        }
        
        .page-title {
          font-size: 48px;
          font-weight: 700;
          letter-spacing: -0.02em;
          line-height: 1.1;
          color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
          margin: 0 0 16px 0;
        }
        
        .page-subtitle {
          font-size: 20px;
          color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
          margin: 0;
          line-height: 1.5;
        }
        
        /* Primary button variant */
        .actionButton.primary {
          background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
          color: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
          border: 1px solid ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
        }

        .actionButton.primary:hover {
          background: ${cssManager.bdTheme('#262626', '#e5e7eb')};
          border-color: ${cssManager.bdTheme('#262626', '#e5e7eb')};
        }
        
        .loading-skeleton {
          height: 64px;
          background: ${cssManager.bdTheme('#f9fafb', '#0a0a0a')};
          border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
        }
        
        @media (max-width: 640px) {
          .header-nav {
            height: 56px;
          }
          
          .site-title {
            font-size: 18px;
          }
          
          .actionButton {
            font-size: 13px;
            padding: 6px 10px;
            height: 32px;
          }
          
          .page-title {
            font-size: 36px;
          }
          
          .page-subtitle {
            font-size: 18px;
          }
        }
    `
  ]

  public render(): TemplateResult {
    if (this.loading) {
      return html`
        <div class="loading-skeleton"></div>
      `;
    }

    return html`
      <header>
        <div class="header-container">
          <nav class="header-nav">
            <div class="header-left">
              ${this.logoUrl ? html`
                <img src="${this.logoUrl}" alt="${this.pageTitle}" class="logo">
              ` : ''}
              <h1 class="site-title">${this.pageTitle}</h1>
            </div>
            <div class="header-actions">
              ${this.showReportButton ? html`
                <button class="actionButton" @click=${this.dispatchReportNewIncident}>
                  Report Issue
                </button>
              ` : ''}
              ${this.showSubscribeButton ? html`
                <button class="actionButton primary" @click=${this.dispatchStatusSubscribe}>
                  Subscribe
                </button>
              ` : ''}
            </div>
          </nav>
        </div>
      </header>
    `;
  }

  public dispatchReportNewIncident() {
    this.dispatchEvent(new CustomEvent('reportNewIncident', {
      
    }))
  }

  public dispatchStatusSubscribe() {
    this.dispatchEvent(new CustomEvent('statusSubscribe', {
      
    }))
  }
}