catalog/ts_web/elements/shx-console-shell.ts

import { DeesElement, html, customElement, css } from '@design.estate/dees-element';
import { shxDemoAgents, shxDemoApprovals, shxDemoDevices } from '../demo/demo-data.js';
import { shxElementStyles } from './tokens.js';
import './shx-badge.js';
import './shx-card.js';
import './shx-icon.js';

declare global {
  interface HTMLElementTagNameMap {
    'shx-console-shell': ShxConsoleShell;
  }
}

@customElement('shx-console-shell')
export class ShxConsoleShell extends DeesElement {
  public static demo = () => html`<shx-console-shell></shx-console-shell>`;
  public static demoGroups = ['smarthome.exchange full pages'];

  public static styles = [
    ...shxElementStyles,
    css`
      :host {
        display: block;
        min-height: 100vh;
        background: var(--shx-bg);
        color: var(--shx-fg);
      }
      .shell {
        display: grid;
        grid-template-columns: 230px 1fr;
        min-height: 100vh;
      }
      aside {
        border-right: 1px solid var(--shx-border-soft);
        background: var(--shx-card);
        padding: 16px;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
        font: 800 14px/1 var(--shx-display);
      }
      .nav {
        display: grid;
        gap: 4px;
      }
      .nav div {
        padding: 8px 10px;
        border-radius: 7px;
        color: var(--shx-fg-3);
        font-size: 13px;
      }
      .nav div:first-child {
        background: var(--shx-accent-soft);
        color: var(--shx-accent);
      }
      main {
        padding: 18px;
      }
      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
      }
      h1 {
        margin: 0;
        font: 800 24px/1 var(--shx-display);
        letter-spacing: -0.03em;
      }
      .grid {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: 14px;
      }
      .list {
        display: grid;
        gap: 8px;
      }
      .row {
        display: grid;
        grid-template-columns: 10px 1fr auto;
        gap: 10px;
        align-items: center;
        padding: 10px;
        border: 1px solid var(--shx-border-soft);
        border-radius: 8px;
        background: var(--shx-card-2);
      }
      .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }
      .name {
        font-weight: 700;
      }
      .sub {
        margin-top: 2px;
        color: var(--shx-fg-3);
        font-size: 12px;
      }
      @media (max-width: 860px) {
        .shell, .grid {
          grid-template-columns: 1fr;
        }
        aside {
          border-right: none;
          border-bottom: 1px solid var(--shx-border-soft);
        }
      }
    `,
  ];

  public render() {
    return html`
      <div class="shell">
        <aside>
          <div class="brand"><shx-icon></shx-icon> smarthome.exchange</div>
          <div class="nav">
            <div>Now</div>
            <div>Agents</div>
            <div>Schedule</div>
            <div>Devices</div>
            <div>Activity</div>
          </div>
        </aside>
        <main>
          <div class="top">
            <h1>Birch Lane</h1>
            <shx-badge>hub online · 12ms</shx-badge>
          </div>
          <div class="grid">
            <shx-card>
              <h2>Agents</h2>
              <div class="list">
                ${shxDemoAgents.map((agentArg) => html`
                  <div class="row">
                    <span class="dot" style="background:${agentArg.color}"></span>
                    <div><div class="name">${agentArg.name}</div><div class="sub">${agentArg.latest}</div></div>
                    <shx-badge>${agentArg.mode}</shx-badge>
                  </div>
                `)}
              </div>
            </shx-card>
            <div class="list">
              <shx-card>
                <h2>Pending approvals</h2>
                <div class="list">
                  ${shxDemoApprovals.map((approvalArg) => html`
                    <div class="row">
                      <span class="dot" style="background:var(--shx-amber)"></span>
                      <div><div class="name">${approvalArg.title}</div><div class="sub">${approvalArg.reason}</div></div>
                      <shx-badge>${Math.round(approvalArg.confidence * 100)}%</shx-badge>
                    </div>
                  `)}
                </div>
              </shx-card>
              <shx-card>
                <h2>Devices</h2>
                <div class="list">
                  ${shxDemoDevices.map((deviceArg) => html`
                    <div class="row">
                      <span class="dot" style="background:var(--shx-green)"></span>
                      <div><div class="name">${deviceArg.name}</div><div class="sub">${deviceArg.room} · ${deviceArg.state}</div></div>
                      <shx-badge>${deviceArg.agent}</shx-badge>
                    </div>
                  `)}
                </div>
              </shx-card>
            </div>
          </div>
        </main>
      </div>
    `;
  }
}