https://impro.social/js/templates/labelBadges.template.e6302a7390.js

1import { html } from "/js/lib/lit-html.js";
2import { cdnImageUrl, getLabelNameAndDescription } from "/js/dataHelpers.js";
3import "/js/components/plugin-slot.js";
4
5export function authorBadgesTemplate({ badgeLabels, did, pluginService }) {
6  return html`<div class="author-badges">
7    ${badgeLabels?.length ? labelBadgesTemplate({ badgeLabels }) : ""}
8    ${pluginService
9      ? html`<plugin-slot
10          name="author-badges"
11          context-did=${did ?? ""}
12          .pluginService=${pluginService}
13        ></plugin-slot>`
14      : ""}
15  </div>`;
16}
17
18function labelBadgesTemplate({ badgeLabels }) {
19  return html`<div class="label-badges" data-testid="label-badges">
20    ${badgeLabels.map(({ labelDefinition, labeler }) => {
21      const { name: displayName } = getLabelNameAndDescription(labelDefinition);
22      return html`<a
23        class="label-badge"
24        data-testid="label-badge"
25        href="/profile/${labeler.creator.handle}"
26      >
27        <img
28          class="label-badge-image"
29          data-testid="label-badge-image"
30          src="${cdnImageUrl(labeler.creator?.avatar) ??
31          "/img/labeler-avatar-fallback.svg"}"
32          alt="${labeler.creator?.handle ?? "Labeler avatar"}"
33        />
34        <span class="label-badge-text" data-testid="label-badge-text"
35          >${displayName}</span
36        >
37      </a>`;
38    })}
39  </div>`;
40}