sigpro-ui/docs/demo_display.md

Display

Badge

mount(
  Badge({ class: 'badge-primary' }, 'New'),
  '#demo-badge'
);

Indicator

mount(
  Indicator({ value: '5' },
    Button({ class: 'btn btn-sm' }, 'Notifications')
  ),
  '#demo-indicator'
);

Stack

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

// 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

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

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