initial

ts_web/elements/00group-ui/dees-mobile-header/dees-mobile-header.demo.ts

@@ -0,0 +1,68 @@
+import { html } from '@design.estate/dees-element';
+import { injectCssVariables } from '../../00variables.js';
+
+export const demoFunc = () => {
+  injectCssVariables();
+  return html`
+  <style>
+    .demo-section {
+      margin-bottom: 2rem;
+    }
+    .demo-section h3 {
+      margin: 0 0 1rem 0;
+      font-size: 0.875rem;
+      color: var(--dees-muted-foreground);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    .header-container {
+      border: 1px solid var(--dees-border);
+      border-radius: var(--dees-radius);
+      overflow: hidden;
+      margin-bottom: 1rem;
+    }
+  </style>
+
+  <div class="demo-section">
+    <h3>Basic Header</h3>
+    <div class="header-container">
+      <dees-mobile-header title="Page Title"></dees-mobile-header>
+    </div>
+  </div>
+
+  <div class="demo-section">
+    <h3>Header with Subtitle</h3>
+    <div class="header-container">
+      <dees-mobile-header title="Settings" subtitle="Manage your preferences"></dees-mobile-header>
+    </div>
+  </div>
+
+  <div class="demo-section">
+    <h3>Header with Back Action</h3>
+    <div class="header-container">
+      <dees-mobile-header title="Item Details">
+        <dees-mobile-button slot="left-action" icon variant="ghost">
+          <dees-mobile-icon icon="arrow-left" size="20"></dees-mobile-icon>
+        </dees-mobile-button>
+      </dees-mobile-header>
+    </div>
+  </div>
+
+  <div class="demo-section">
+    <h3>Header with Actions</h3>
+    <div class="header-container">
+      <dees-mobile-header title="Shopping List">
+        <dees-mobile-button slot="left-action" icon variant="ghost">
+          <dees-mobile-icon icon="menu" size="20"></dees-mobile-icon>
+        </dees-mobile-button>
+        <dees-mobile-button slot="actions" icon variant="ghost">
+          <dees-mobile-icon icon="search" size="20"></dees-mobile-icon>
+        </dees-mobile-button>
+        <dees-mobile-button slot="actions" icon variant="ghost">
+          <dees-mobile-icon icon="plus" size="20"></dees-mobile-icon>
+        </dees-mobile-button>
+      </dees-mobile-header>
+    </div>
+  </div>
+`;
+};