How to use the lit-html/lib/repeat.repeat function in lit-html

&.success {
					background: var(--resolved-background);
				}
			}
			button {
				margin-top: 3rem;
				@mixin button;
			}
		
		<main>
			<form>
				<dl>
					${repeat(options, opt =&gt; {
						const { title, template } = opt
						return html`
						<dt>${title}</dt>
						<dd>${template}</dd>
						`
					})}
				</dl>
				<button>Save</button>
			</form>
		</main>
		`
	}

private get keywords(): TemplateResult {
    return html`
      <div class="row ellipsis" id="keywords">
        ${repeat(this.pkg.keywords, keyword =&gt; keyword, (keyword, _index) =&gt; this.keyword(keyword))}
      </div>
    `;
  }

}
			p:not(:last-child) {
				margin-bottom: 1rem;
			}
			[slot=body] {
				padding: 1rem;
			}
			[data-tooltip-position] {
				width: 80%;
			}
			[data-tooltip-position=right] {
				margin-left: 20%;
			}
		
		${more}
		${repeat(mess, mes => message(user, mes))}
		`
	}

private get install(): TemplateResult {
    return html`
      <div class="row" id="install">
        <div id="tabs">
          ${repeat(this.pkg.installCommands(this.component.global), command =&gt; command.id, (command, _index) =&gt; this.installTab(command))}
        </div>
        <div class="row-horizontal" id="commands">
          ${repeat(this.pkg.installCommands(this.component.global), command =&gt; command.id, (command, _index) =&gt; this.installCommand(command))}
          <div class="item">
            <a title="Copy command" href="#" id="copy"> this.copyInstallCommand(event)}&gt;${this.copy}</a>
          </div>
        </div>
      </div>
    `;
  }

const buttons = f => {
			const provs = ['google', 'facebook', 'github']
			const popup = prov =>
				html``
			const redirect = prov =>
				html``
			if (f === 'popup') {
				return repeat(provs, prov => popup(prov))
			}
			if (f === 'redirect') {
				return repeat(provs, prov => redirect(prov))
			}
		}

font-weight: 400;
				text-transform: capitalize;
				font-family: var(--font-family);
				background: #f1eedf;
			}
			.active {
				button {
					font-weight: 700;
					background: var(--yellow);
					color: black;
				}
			}
		
		
			<ul>
				${repeat(values, item =&gt; html`
				<li scope="">
					<button>
						${item}${item === 'private' ? ` (${price})` : ''}
					</button>
				</li>`)}
			</ul>
		
		`
	}

}
				&.public {
					background: #4CAF50;
				}
				&.private {
					background: #607D8B;
				}
				&.unassigned {
					background: #3F51B5;
				}
				&.forked {
					background: rebeccapurple;
				}
			}
		
		${repeat(labels, label => label)}
		`
	}

export const template = (tags: string[], opts?: Options) => {
	const { className = 'tags' } = opts || {}
	return html`<div>${repeat(
		tags,
		tag =&gt;
			html`<span><a>${tag}</a></span>`
	)}</div>`
}

function TreeBranch(
  title: string,
  parent: RecursiveRecord,
  actions: Actions,
  depth: number,
  selectedId?: string,
  hoverId?: string
) {
  const keys = Object.keys(parent);
  if (keys.length === 0) {
    return;
  }
  return html`
    <div class="title">${title}</div>
      ${repeat(
        Object.keys(parent),
        p =&gt; p,
        item =&gt; {
          const val = parent[item];
          if (typeof val === 'string' || val == null) {
            return html`
                 ${TreeLeaf({
                   id: item,
                   selected: selectedId === item,
                   expanded: false,
                   hovered: hoverId === item,
                   unavailable: val == null,
                   parent,
                   actions,
                 })}
             `;

export function LayerManager(
  glLayers: any[],
  actions: Actions
): TemplateResult {
  return Box({
    title: 'LayerManager',
    children: html`
    <div class="layout vertical">
    ${repeat(
      glLayers.filter(r =&gt; !r.internal &amp;&amp; !r.layer.id.includes('casing')),
      gl =&gt; gl.id,
      (item, index) =&gt; {
        const name = reverseGetNameSpacedLayerId(item.layer.id);
        return html`
                <span>
                    <input type="checkbox"> actions.modifyLayerHide(item.layer.id)}
                    &gt;
                    <label> ${name}</label>
                </span>
                `;
      }</div>