How to use the solid-ui.widgets.errorMessageBlock function in solid-ui

heading('Edit your public profile')

        var profile = me.doc()
        if (store.any(subject, ns.solid('editableProfile'))) {
          // @@ TODO Remove the casting on next line
          editableProfile = store.any(
            subject,
            ns.solid('editableProfile')
          ) as NamedNode
          // @@ TODO Remove casting of store.updater
        } else if ((store.updater as any).editable(profile.uri, store)) {
          editableProfile = profile
        } else {
          statusArea.appendChild(
            widgets.errorMessageBlock(
              dom,
              `⚠️ Your profile ${profile} is not editable, so we cannot do much here.`,
              'straw'
            )
          )
          return
        }

        comment(`Everything you put here will be public.
     There will be other places to record private things..`)

        heading('Your contact information')

        main.appendChild(paneDiv(context, me, 'contact'))

        heading('People you know who have webids')

async function doRender (
      container: HTMLElement,
      subject: NamedNode | null,
      dom: HTMLDocument
    ) {
      if (!subject) throw new Error('subject missing')
      const profile = subject.doc()
      const otherProfiles = store.each(subject, ns.rdfs('seeAlso'), null, profile)
      if (otherProfiles.length > 0) {
        try {
          // @@ TODO Remove casting of store and store.fetcher.load
          await ((store as any).fetcher.load as any)(otherProfiles)
        } catch (err) {
          container.appendChild(widgets.errorMessageBlock(err))
        }
      }

      var backgroundColor =
        store.anyValue(
          subject,
          ns.solid('profileBackgroundColor'),
          null,
          subject.doc()
        ) || '#ffffff'
      // Todo: check format of color matches regexp and not too dark
      container.style.backgroundColor = backgroundColor // @@ Limit to pale?
      var highlightColor =
        store.anyValue(
          subject,
          ns.solid('profileHighlightColor', null, subject.doc())

heading('Edit your public profile')

        var profile = me.doc()
        if (store.any(subject, ns.solid('editableProfile'))) {
          // @@ TODO Remove the casting on next line
          editableProfile = store.any(
            subject,
            ns.solid('editableProfile')
          ) as NamedNode
          // @@ TODO Remove casting of store.updater
        } else if ((store.updater as any).editable(profile.uri, store)) {
          editableProfile = profile
        } else {
          statusArea.appendChild(
            widgets.errorMessageBlock(
              dom,
              `⚠️ Your profile ${profile} is not editable, so we cannot do much here.`,
              'straw'
            )
          )
          return
        }

        comment(`Everything you put here will be public.
     There will be other places to record private things..`)

        heading('Your contact information')

        main.appendChild(paneDiv(context, me, 'contact'))

        heading('People you know who have webids')

(err: any) => {
      statusArea.appendChild(widgets.errorMessageBlock(dom, err))
    }
  )

var complainIfBad = function (ok: boolean, message: string) {
      if (!ok) {
        div.appendChild(widgets.errorMessageBlock(dom, message, 'pink'))
      }
    }

function complainIfBad (ok: Boolean, mess: any) {
      if (ok) return
      container.appendChild(widgets.errorMessageBlock(dom, mess, '#fee'))
    }

function complainIfBad (ok: Boolean, mess: any) {
      if (ok) return
      div.appendChild(widgets.errorMessageBlock(dom, mess, '#fee'))
    }

(err: Error) => {
        statusArea.appendChild(widgets.errorMessageBlock(dom, err, '#fee'))
      }
    )

var complainIfBad = function (ok: boolean, message: string) {
      if (!ok) {
        div.appendChild(widgets.errorMessageBlock(dom, message, 'pink'))
      }
    }