webwidget/ts_web/elements/uptimelink-webwidget.ts

import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
import * as domtools from '@designestate/dees-domtools';

@customElement('uptimelink-webwidget')
export class UptimelinkWebwidget extends LitElement {
  public static demo = () => html`
    <uptimelink-webwidget projectSlug="uptime.link"></uptimelink-webwidget>
  `;

  @property()
  public projectSlug: string;

  constructor() {
    super();
    domtools.DomTools.setupDomTools();
  }

  public render(): TemplateResult {
    return html`
      ${domtools.elementBasic.styles}
      <style>
        .mainbox {
          margin: auto;
          display: grid;
          grid-template-columns: 26px auto;
          font-family: Roboto;
          font-weight: 400;
          font-size: 13px;
          box-sizing: border-box;
          width: 150px;
          border-radius: 20px;
          height: 30px;
          background: #222;
          padding: 5px;
          color: #CCC;
          cursor: pointer;
        }
        .statusindicator {
          height: 20px;
          width: 20px;
          background:  #66BB6A;
          border-radius: 10px;
        }
        .statustext {
          padding-top: 3px;
        }
      </style>
      <div class="mainbox">
        <div class="statusindicator"></div>
        <div class="statustext">All systems are up!</div>
      </div>
    `;
  }
}