# 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'
);
```