Created some base components

2026-02-13 16:20:24 +01:00
parent 0f043bda61
commit 8a8aecf557
17 changed files with 846 additions and 440 deletions
@@ -0,0 +1,43 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('ui-card')
+export class UiCard extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      max-width: 420px;
+    }
+
+    .card {
+      width: 100%;
+      background: var(--color-bg-nav);
+      border: 1px solid var(--color-border);
+      border-radius: 1rem;
+      padding: 2.5rem 2rem 2rem;
+      display: flex;
+      flex-direction: column;
+      gap: 1.25rem;
+      box-shadow:
+        0 1px 3px rgba(0, 0, 0, 0.08),
+        0 12px 40px rgba(0, 0, 0, 0.12);
+      backdrop-filter: blur(12px);
+    }
+
+    :host([centered]) .card {
+      align-items: center;
+      text-align: center;
+    }
+  `;
+
+  @property({ type: Boolean, reflect: true }) centered = false;
+
+  render() {
+    return html`
+      <div class="card">
+        <slot></slot>
+      </div>
+    `;
+  }
+}