feat: init basic settings

src/components/simple-counter/index.ts

@@ -0,0 +1,59 @@
+import { LitElement, css, html, unsafeCSS } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import * as React from 'react';
+import { theme } from '@/styles';
+
+export const tagName = 'simple-counter';
+
+// Adapt React in order to be able to use custom tags properly
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName]: PersonInfoProps;
+    }
+  }
+}
+
+interface PersonInfoProps
+  extends React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLElement>,
+    HTMLElement
+  > {
+  name?: string;
+}
+// ===================== Adapt end ====================
+
+@customElement(tagName)
+export class Counter extends LitElement {
+  static styles = css`
+    .counter-container {
+      display: flex;
+      color: ${unsafeCSS(theme.colors.primary)};
+    }
+    button {
+      margin: 0 5px;
+    }
+  `;
+
+  @property()
+  name?: string = '';
+
+  @state()
+  count = 0;
+  // Render the UI as a function of component state
+  render() {
+    return html`<div class="counter-container">
+      <div class="name">${this.name}</div>
+      <button @click=${this._subtract}>-</button>
+      <div>${this.count}</div>
+      <button @click="${this._increment}">+</button>
+    </div>`;
+  }
+
+  private _increment(e: Event) {
+    this.count++;
+  }
+  private _subtract(e: Event) {
+    this.count--;
+  }
+}