catalog/ts_web/elements/sz-network-dns-view.ts

import {
  DeesElement,
  customElement,
  html,
  css,
  cssManager,
  property,
  type TemplateResult,
} from '@design.estate/dees-element';

declare global {
  interface HTMLElementTagNameMap {
    'sz-network-dns-view': SzNetworkDnsView;
  }
}

export interface IDnsRecord {
  domain: string;
  type: 'A' | 'AAAA' | 'CNAME' | 'MX' | 'TXT';
  value: string;
  id?: string;
}

@customElement('sz-network-dns-view')
export class SzNetworkDnsView extends DeesElement {
  public static demo = () => html`
    <div style="padding: 24px; max-width: 1000px;">
      <sz-network-dns-view
        .records=${[
          { domain: 'pr.task.vc', type: 'A', value: '195.201.98.232' },
          { domain: 'outline.task.vc', type: 'A', value: '195.201.98.232' },
          { domain: 'ns1.task.vc', type: 'A', value: '212.95.99.130' },
          { domain: 'bleu.de', type: 'A', value: '212.95.99.130' },
          { domain: 'mail.bleu.de', type: 'MX', value: '10 mail.bleu.de' },
        ]}
      ></sz-network-dns-view>
    </div>
  `;

  public static demoGroups = ['Network'];

  @property({ type: Array })
  public accessor records: IDnsRecord[] = [];

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
      }

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
      }

      .description {
        font-size: 14px;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
      }

      .sync-button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
        cursor: pointer;
        transition: all 200ms ease;
      }

      .sync-button:hover {
        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
        border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
      }

      .table-container {
        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
        border-radius: 8px;
        overflow: hidden;
      }

      .table-header {
        display: grid;
        grid-template-columns: 2fr 80px 2fr 100px;
        gap: 16px;
        padding: 12px 16px;
        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
        border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
      }

      .table-row {
        display: grid;
        grid-template-columns: 2fr 80px 2fr 100px;
        gap: 16px;
        padding: 12px 16px;
        border-bottom: 1px solid ${cssManager.bdTheme('#f4f4f5', '#27272a')};
        font-size: 14px;
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
        transition: background 200ms ease;
      }

      .table-row:last-child {
        border-bottom: none;
      }

      .table-row:hover {
        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
      }

      .domain {
        font-weight: 500;
      }

      .type-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 2px 8px;
        background: ${cssManager.bdTheme('#dbeafe', 'rgba(59, 130, 246, 0.2)')};
        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
        border-radius: 4px;
        font-size: 12px;
        font-weight: 600;
      }

      .value {
        font-family: monospace;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
      }

      .delete-button {
        padding: 6px 12px;
        background: transparent;
        border: 1px solid ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.3)')};
        border-radius: 4px;
        font-size: 13px;
        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
        cursor: pointer;
        transition: all 200ms ease;
      }

      .delete-button:hover {
        background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.2)')};
      }

      .empty-state {
        padding: 48px 24px;
        text-align: center;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="header">
        <span class="description">Manage DNS records synced with Cloudflare</span>
        <button class="sync-button" @click=${() => this.handleSync()}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M21 12a9 9 0 0 1-9 9m9-9a9 9 0 0 0-9-9m9 9H3m9 9a9 9 0 0 1-9-9m9 9c1.66 0 3-4.03 3-9s-1.34-9-3-9m0 18c-1.66 0-3-4.03-3-9s1.34-9 3-9"/>
          </svg>
          Sync Cloudflare
        </button>
      </div>

      <div class="table-container">
        <div class="table-header">
          <span>Domain</span>
          <span>Type</span>
          <span>Value</span>
          <span>Actions</span>
        </div>
        ${this.records.length > 0 ? this.records.map(record => html`
          <div class="table-row">
            <span class="domain">${record.domain}</span>
            <span><span class="type-badge">${record.type}</span></span>
            <span class="value">${record.value}</span>
            <span>
              <button class="delete-button" @click=${() => this.handleDelete(record)}>Delete</button>
            </span>
          </div>
        `) : html`
          <div class="empty-state">No DNS records found</div>
        `}
      </div>
    `;
  }

  private handleSync() {
    this.dispatchEvent(new CustomEvent('sync', { bubbles: true, composed: true }));
  }

  private handleDelete(record: IDnsRecord) {
    this.dispatchEvent(new CustomEvent('delete', { detail: record, bubbles: true, composed: true }));
  }
}