How to use the @cycle/dom.h2 function in @cycle/dom

return state$.map(state => {
    let i = 0;
    return div([
      h2('Data grid - DOM update performance demo'),
      p(`This table contains 2000 cells, of which one is updated ideally every
        5 ms. It is intended as a stress test of the virtual DOM mechanism,
        and a simple case in which to apply any optimizations to get performant
        results. In its current form, this series of updates results in
        substantial browser CPU usage.`),
      table(
        { class: { cells: true } },
        rows.map(row => tr({ key: i },
          cols.map(col => thunk('td', ++i, cell, [i, state.values[i]]))
          // without the thunk:
          // cols.map(col => cell(++i, state.values[i]))
        ))
      )
    ]);
  });
}

export function QuickstartView() {
    return div('.current-article', [
        section([
            h1('Bienvenido a la comunidad de Anzu.'),
            p(
                'Únete a la conversación y aporta ideas para el desarrollo de Anzu, una poderosa plataforma de foros y comunidades enfocada en la discusión e interacción entre usuarios en tiempo real.'
            ),
            div('.separator'),
            h2('Si eres nuevo por aquí'),
            div('.quick-guide', [
                div([
                    h3(
                        a([
                            'Código de conducta ',
                            span('.icon.icon-arrow-right'),
                        ])
                    ),
                    p(
                        'Si gustas de contribuir te compartimos los lineamientos que está comunidad sigue por el bien de todos.'
                    ),
                ]),
                div([
                    h3(
                        a([
                            'Preguntas frecuentes ',

(state => {
                    switch (state.publisher.step) {
                        case 0:
                            return postContent(state);
                        case 1:
                            return postInfo(state);
                        case 2:
                            return postReview(state);
                    }
                })(state),
            ]),
            section(
                '.fade-in.guidelines.flex.flex-column',
                { style: { display: 'none' } },
                [
                    h2('.f4', 'Recuerda estas reglas básicas'),
                    div('.timeline', [
                        div('.timeline-item', [
                            div('.timeline-left', a('.timeline-icon')),
                            div('.timeline-content', [
                                p(
                                    '.b.lh-title.mb1',
                                    'Las publicaciones deben ser relacionados a su categoría'
                                ),
                                p(
                                    '.lh-copy.mb0',
                                    'Si deseas colocar un tema que se salga muy abruptamente de las categorías de la comunidad, te pedimos que utilices la sección de Bar Spartano para hacerlo. Damos la bienvenida a temas de discusión general, pero los rechazamos en las otras secciones.'
                                ),
                            ]),
                        ]),
                        div('.timeline-item', [
                            div('.timeline-left', a('.timeline-icon')),

const vdom$ = content$.map(content =>
    div([
      h2('Commits List'),
      content
    ])
  );

const invoice = inv => qrinv(inv).then(qr => ({ unitf, conf: { expert } }) =>
  div('.waiting-payment', [
    div('.row', [
      div('.col-sm-6.text-center', [
        h2('Waiting for payment')
      , inv.msatoshi !== 'any' ? h3('.toggle-unit', unitf(inv.msatoshi)) : ''
      , small('.d-none.d-sm-block.text-muted.break-all.mt-3', inv.bolt11)
      ])
    , div('.col-sm-6.text-center', [
        img('.qr', { attrs: { src: qr } })
      , small('.d-block.d-sm-none.text-muted.break-all.mt-3', inv.bolt11)
      ])
    ])
  , expert ? yaml(omitKey('bolt11', inv)) : ''
  ]))

a({ attrs: { href: '/c/' + s.slug } }, s.name)
                    )
                )
            );
    }, []);

    return div(
        '.categories.flex.items-center',
        category !== false && category in slugs
            ? [
                  a(
                      '.dib.btn-icon',
                      { attrs: { href: '/', tabindex: 0 } },
                      span('.icon-left-open')
                  ),
                  h2('.pl2.flex-auto.fade-in', slugs[category].name),
              ]
            : [
                  h2('.flex-auto.fade-in', 'Todas las categorias'),
                  div('.dropdown.dropdown-right.fade-in', [
                      a(
                          '.dib.btn-icon.dropdown-toggle',
                          { attrs: { tabindex: 0 } },
                          span('.icon-down-open')
                      ),
                      ul('.menu', menu),
                  ]),
              ]
    );
}

const recv = ({ amtData }) =>
  form({ attrs: { do: 'new-invoice' } }, [
    h2('Request payment')
  , formGroup('Payment amount', amountField(amtData, 'msatoshi', false))

  , formGroup('Description'
    , input('.form-control.form-control-lg', { attrs: { type: 'text', name: 'description', placeholder: '(optional)' } })
    , 'Embedded in the QR and presented to the payer.')

  , div('.form-buttons', [
      button('.btn.btn-lg.btn-primary', { attrs: { type: 'submit' } }, 'Request')
    , ' '
    , a('.btn.btn-lg.btn-secondary', { attrs: { href: '#/' } }, 'Cancel')
    ])
  ])

function postContent(state) {
    const { publisher } = state;
    const { content } = publisher;
    const ready = content.length > 30;

    return div([
        h1('.ma0.pv3.tc', 'Escribir nueva publicación'),
        form('.pv3.mt3', { attrs: { id: 'step2' } }, [
            h2('.mt0.mb3', 'Explica tu tema o pregunta:'),
            div('.form-group.pb2', [
                textarea('#content.form-input', {
                    attrs: {
                        placeholder:
                            'Escribe aquí el contenido de tu publicación',
                        rows: 8,
                    },
                    hook: {
                        insert: vnode => {
                            vnode.elm.value = content;
                            autosize(vnode.elm);
                        },
                    },
                }),
            ]),
            input('.btn.btn-primary.btn-block', {

module.exports = function ({navi, user}) {
  return (
    div([
      h2("User"),
      p(["Id: ", user.id]),
      p(["Name: ", user.username]),
      p(["Email: ", user.email]),
      p(["Points: ", user.points]),
      p(["Bonus: ", user.bonus ? user.bonus : "–"]),
      p([
        ...(
          navi.isActiveRoute("/users/:id") ?
            [] :
            [span(a({href: window.unroute("/users/:id", {id: user.id})}, "Detail")), span(" ")]
        ),
      ])
    ])
  )
}