Before repair nav components

docs/demo_display.md

@@ -0,0 +1,100 @@
+# Display
+
+## Badge
+<div id="demo-badge"></div>
+
+```js
+mount(
+  Badge({ class: 'badge-primary' }, 'New'),
+  '#demo-badge'
+);
+```
+
+## Indicator
+<div id="demo-indicator"></div>
+
+```js
+mount(
+  Indicator({ value: '5' },
+    Button({ class: 'btn btn-sm' }, 'Notifications')
+  ),
+  '#demo-indicator'
+);
+```
+
+## Stack
+<div id="demo-stack"></div>
+
+```js
+mount(
+  Stack({ class: 'w-32 h-20' }, [
+    div({ class: 'bg-primary text-primary-content p-2' }, 'Top'),
+    div({ class: 'bg-secondary text-secondary-content p-2' }, 'Bottom')
+  ]),
+  '#demo-stack'
+);
+```
+
+## Stat
+<div id="demo-stat"></div>
+
+```js
+// Stat is a simple wrapper for the DaisyUI stat component
+const Stat = (p, c) => div({ ...p, class: cls('stat', p.class) }, c)
+
+mount(
+  div({ class: 'stats shadow' },
+    Stat({ class: 'stat' }, [
+      div({ class: 'stat-title' }, 'Total Downloads'),
+      div({ class: 'stat-value' }, '12.5K'),
+      div({ class: 'stat-desc' }, '21% more than last month')
+    ])
+  ),
+  '#demo-stat'
+)
+```
+
+## Table
+<div id="demo-table"></div>
+
+```js
+const users = [
+  { id: 1, name: 'Alice', role: 'Admin' },
+  { id: 2, name: 'Bob', role: 'Editor' },
+  { id: 3, name: 'Charlie', role: 'Viewer' }
+];
+
+mount(
+  Table({
+    items: users,
+    columns: [
+      { key: 'name', label: 'Name' },
+      { key: 'role', label: 'Role' },
+      { render: (it) => Button({ class: 'btn-xs' }, 'Edit') }
+    ],
+    class: 'table-zebra'
+  }),
+  '#demo-table'
+);
+```
+
+## Timeline
+<div id="demo-timeline"></div>
+
+```js
+mount(
+  Timeline({ vertical: true }, [
+    li({}, [
+      div({ class: 'timeline-start' }, '2024'),
+      div({ class: 'timeline-middle' }, span({ class: 'icon-[lucide--check]' })),
+      div({ class: 'timeline-end timeline-box' }, 'Project started')
+    ]),
+    li({}, [
+      div({ class: 'timeline-start' }, '2025'),
+      div({ class: 'timeline-middle' }, span({ class: 'icon-[lucide--clock]' })),
+      div({ class: 'timeline-end timeline-box' }, 'First prototype')
+    ])
+  ]),
+  '#demo-timeline'
+);
+```