element-web/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<PinnedEventTile /> should render pinned event 1`] = `
<div>
  <div
    class="mx_PinnedEventTile"
    role="listitem"
  >
    <div>
      <span
        class="_avatar_mcap2_17 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_mcap2_61"
        data-color="2"
        data-testid="avatar-img"
        data-type="round"
        role="presentation"
        style="--cpd-avatar-size: 32px;"
      >
        a
      </span>
    </div>
    <div
      class="mx_PinnedEventTile_wrapper"
    >
      <div
        class="mx_PinnedEventTile_top"
      >
        <span
          aria-labelledby="floating-ui-1"
          class="mx_PinnedEventTile_sender mx_Username_color2"
        >
          @alice:server.org
        </span>
        <button
          aria-disabled="false"
          aria-expanded="false"
          aria-haspopup="menu"
          aria-label="Open menu"
          class="_icon-button_bh2qc_17"
          data-state="closed"
          id="radix-0"
          role="button"
          style="--cpd-icon-button-size: 24px;"
          tabindex="0"
          type="button"
        >
          <div
            class="_indicator-icon_133tf_26"
            style="--cpd-icon-button-size: 100%;"
          >
            <svg
              fill="currentColor"
              height="1em"
              viewBox="0 0 24 24"
              width="1em"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
              />
            </svg>
          </div>
        </button>
      </div>
      <div
        class="mx_MTextBody mx_EventTile_content"
      >
        <div
          class="mx_EventTile_body translate"
          dir="auto"
        >
          First pinned message
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
<div>
  <div
    class="mx_PinnedEventTile"
    role="listitem"
  >
    <div>
      <span
        class="_avatar_mcap2_17 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_mcap2_61"
        data-color="2"
        data-testid="avatar-img"
        data-type="round"
        role="presentation"
        style="--cpd-avatar-size: 32px;"
      >
        a
      </span>
    </div>
    <div
      class="mx_PinnedEventTile_wrapper"
    >
      <div
        class="mx_PinnedEventTile_top"
      >
        <span
          aria-labelledby="floating-ui-6"
          class="mx_PinnedEventTile_sender mx_Username_color2"
        >
          @alice:server.org
        </span>
        <button
          aria-disabled="false"
          aria-expanded="false"
          aria-haspopup="menu"
          aria-label="Open menu"
          class="_icon-button_bh2qc_17"
          data-state="closed"
          id="radix-2"
          role="button"
          style="--cpd-icon-button-size: 24px;"
          tabindex="0"
          type="button"
        >
          <div
            class="_indicator-icon_133tf_26"
            style="--cpd-icon-button-size: 100%;"
          >
            <svg
              fill="currentColor"
              height="1em"
              viewBox="0 0 24 24"
              width="1em"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
              />
            </svg>
          </div>
        </button>
      </div>
      <div
        class="mx_MTextBody mx_EventTile_content"
      >
        <div
          class="mx_EventTile_body translate"
          dir="auto"
        >
          First pinned message
        </div>
      </div>
      <div
        class="mx_PinnedEventTile_thread"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M7 10a.968.968 0 0 1-.713-.287A.968.968 0 0 1 6 9c0-.283.096-.52.287-.713A.968.968 0 0 1 7 8h10a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 17 10H7Zm0 4a.967.967 0 0 1-.713-.287A.968.968 0 0 1 6 13c0-.283.096-.52.287-.713A.967.967 0 0 1 7 12h6c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.968.968 0 0 1 13 14H7Z"
          />
          <path
            d="M3.707 21.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293ZM6 17h14V5H4v13.172l.586-.586A2 2 0 0 1 6 17Z"
          />
        </svg>
        <span>
          Reply to a 
          <button
            type="button"
          >
            thread message
          </button>
        </span>
      </div>
    </div>
  </div>
</div>
`;

exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
<div
  aria-label="Open menu"
  aria-labelledby="radix-8"
  aria-orientation="vertical"
  class="_menu_1x5h1_17"
  data-align="start"
  data-orientation="vertical"
  data-radix-menu-content=""
  data-side="right"
  data-state="open"
  dir="ltr"
  id="radix-9"
  role="menu"
  style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
  tabindex="-1"
>
  <button
    class="_item_8j2l6_17 _interactive_8j2l6_35"
    data-kind="primary"
    data-orientation="vertical"
    data-radix-collection-item=""
    role="menuitem"
    tabindex="-1"
  >
    <svg
      aria-hidden="true"
      class="_icon_8j2l6_43"
      fill="currentColor"
      height="24"
      viewBox="0 0 24 24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M12 16c1.25 0 2.313-.438 3.188-1.313.874-.874 1.312-1.937 1.312-3.187 0-1.25-.438-2.313-1.313-3.188C14.313 7.439 13.25 7 12 7c-1.25 0-2.312.438-3.187 1.313C7.938 9.187 7.5 10.25 7.5 11.5c0 1.25.438 2.313 1.313 3.188C9.688 15.562 10.75 16 12 16Zm0-1.8c-.75 0-1.387-.262-1.912-.787A2.604 2.604 0 0 1 9.3 11.5c0-.75.263-1.387.787-1.912A2.604 2.604 0 0 1 12 8.8c.75 0 1.387.262 1.912.787.525.526.788 1.163.788 1.913s-.262 1.387-.787 1.912A2.604 2.604 0 0 1 12 14.2Zm0 4.8c-2.317 0-4.433-.613-6.35-1.837-1.917-1.226-3.367-2.88-4.35-4.963a.812.812 0 0 1-.1-.313 2.93 2.93 0 0 1 0-.774.812.812 0 0 1 .1-.313c.983-2.083 2.433-3.738 4.35-4.963C7.567 4.614 9.683 4 12 4c2.317 0 4.433.612 6.35 1.838 1.917 1.224 3.367 2.879 4.35 4.962a.81.81 0 0 1 .1.313 2.925 2.925 0 0 1 0 .774.81.81 0 0 1-.1.313c-.983 2.083-2.433 3.738-4.35 4.963C16.433 18.387 14.317 19 12 19Zm0-2a9.544 9.544 0 0 0 5.188-1.488A9.773 9.773 0 0 0 20.8 11.5a9.773 9.773 0 0 0-3.613-4.013A9.544 9.544 0 0 0 12 6a9.545 9.545 0 0 0-5.187 1.487A9.773 9.773 0 0 0 3.2 11.5a9.773 9.773 0 0 0 3.613 4.012A9.544 9.544 0 0 0 12 17Z"
      />
    </svg>
    <span
      class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_8j2l6_52"
    >
      View in timeline
    </span>
    <svg
      aria-hidden="true"
      class="_nav-hint_8j2l6_59"
      fill="currentColor"
      height="24"
      viewBox="8 0 8 24"
      width="8"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
      />
    </svg>
  </button>
  <button
    class="_item_8j2l6_17 _interactive_8j2l6_35"
    data-kind="primary"
    data-orientation="vertical"
    data-radix-collection-item=""
    role="menuitem"
    tabindex="-1"
  >
    <svg
      aria-hidden="true"
      class="_icon_8j2l6_43"
      fill="currentColor"
      height="24"
      viewBox="0 0 24 24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        clip-rule="evenodd"
        d="M5.457 2.083a1 1 0 0 0-1.414 1.414L8.04 7.494v2.25a.5.5 0 0 1-.15.356l-3.7 3.644a.5.5 0 0 0-.15.356v1.4a.5.5 0 0 0 .5.5h6.5v6a1 1 0 0 0 2 0v-6h3.506l4.497 4.497a1 1 0 0 0 1.414-1.414l-17-17ZM14.546 14 10.04 9.494v.25a2.5 2.5 0 0 1-.746 1.781L6.78 14h7.766Z"
        fill-rule="evenodd"
      />
      <path
        d="M14.04 4v3.85l2.015 2.015a.5.5 0 0 1-.015-.12V5.257a.5.5 0 0 1 .15-.357l2.081-2.043a.5.5 0 0 0-.35-.857h-9.73l2 2h3.849Z"
      />
    </svg>
    <span
      class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_8j2l6_52"
    >
      Unpin
    </span>
    <svg
      aria-hidden="true"
      class="_nav-hint_8j2l6_59"
      fill="currentColor"
      height="24"
      viewBox="8 0 8 24"
      width="8"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
      />
    </svg>
  </button>
  <button
    class="_item_8j2l6_17 _interactive_8j2l6_35"
    data-kind="primary"
    data-orientation="vertical"
    data-radix-collection-item=""
    role="menuitem"
    tabindex="-1"
  >
    <svg
      aria-hidden="true"
      class="_icon_8j2l6_43"
      fill="currentColor"
      height="24"
      viewBox="0 0 24 24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M14.597 5.708a1.004 1.004 0 0 1 0-1.416.996.996 0 0 1 1.412 0l4.699 4.714c.39.39.39 1.025 0 1.416l-4.7 4.714a.996.996 0 0 1-1.411 0 1.004 1.004 0 0 1 0-1.416l3.043-3.054H8.487C6.599 10.666 5 12.27 5 14.333 5.002 16.396 6.6 18 8.488 18h2.093a1 1 0 1 1 0 2H8.487C5.42 20 3 17.425 3 14.333c0-3.092 2.42-5.666 5.486-5.666h9.059l-2.95-2.959Z"
      />
    </svg>
    <span
      class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_8j2l6_52"
    >
      Forward
    </span>
    <svg
      aria-hidden="true"
      class="_nav-hint_8j2l6_59"
      fill="currentColor"
      height="24"
      viewBox="8 0 8 24"
      width="8"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
      />
    </svg>
  </button>
  <div
    class="_separator_144s5_17"
    data-kind="primary"
    data-orientation="horizontal"
    role="separator"
  />
  <button
    class="_item_8j2l6_17 _interactive_8j2l6_35"
    data-kind="critical"
    data-orientation="vertical"
    data-radix-collection-item=""
    role="menuitem"
    tabindex="-1"
  >
    <svg
      aria-hidden="true"
      class="_icon_8j2l6_43"
      fill="currentColor"
      height="24"
      viewBox="0 0 24 24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M7 21c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 5 19V6a.968.968 0 0 1-.713-.287A.968.968 0 0 1 4 5c0-.283.096-.52.287-.713A.968.968 0 0 1 5 4h4a.97.97 0 0 1 .287-.712A.968.968 0 0 1 10 3h4a.97.97 0 0 1 .713.288A.968.968 0 0 1 15 4h4a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 19 6v13c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 17 21H7ZM7 6v13h10V6H7Zm2 10c0 .283.096.52.287.712.192.192.43.288.713.288s.52-.096.713-.288A.968.968 0 0 0 11 16V9a.967.967 0 0 0-.287-.713A.968.968 0 0 0 10 8a.968.968 0 0 0-.713.287A.968.968 0 0 0 9 9v7Zm4 0c0 .283.096.52.287.712.192.192.43.288.713.288s.52-.096.713-.288A.968.968 0 0 0 15 16V9a.967.967 0 0 0-.287-.713A.968.968 0 0 0 14 8a.968.968 0 0 0-.713.287A.967.967 0 0 0 13 9v7Z"
      />
    </svg>
    <span
      class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_8j2l6_52"
    >
      Delete
    </span>
    <svg
      aria-hidden="true"
      class="_nav-hint_8j2l6_59"
      fill="currentColor"
      height="24"
      viewBox="8 0 8 24"
      width="8"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
      />
    </svg>
  </button>
</div>
`;

exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`] = `
<div
  aria-label="Open menu"
  aria-labelledby="radix-4"
  aria-orientation="vertical"
  class="_menu_1x5h1_17"
  data-align="start"
  data-orientation="vertical"
  data-radix-menu-content=""
  data-side="right"
  data-state="open"
  dir="ltr"
  id="radix-5"
  role="menu"
  style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
  tabindex="-1"
>
  <button
    class="_item_8j2l6_17 _interactive_8j2l6_35"
    data-kind="primary"
    data-orientation="vertical"
    data-radix-collection-item=""
    role="menuitem"
    tabindex="-1"
  >
    <svg
      aria-hidden="true"
      class="_icon_8j2l6_43"
      fill="currentColor"
      height="24"
      viewBox="0 0 24 24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M12 16c1.25 0 2.313-.438 3.188-1.313.874-.874 1.312-1.937 1.312-3.187 0-1.25-.438-2.313-1.313-3.188C14.313 7.439 13.25 7 12 7c-1.25 0-2.312.438-3.187 1.313C7.938 9.187 7.5 10.25 7.5 11.5c0 1.25.438 2.313 1.313 3.188C9.688 15.562 10.75 16 12 16Zm0-1.8c-.75 0-1.387-.262-1.912-.787A2.604 2.604 0 0 1 9.3 11.5c0-.75.263-1.387.787-1.912A2.604 2.604 0 0 1 12 8.8c.75 0 1.387.262 1.912.787.525.526.788 1.163.788 1.913s-.262 1.387-.787 1.912A2.604 2.604 0 0 1 12 14.2Zm0 4.8c-2.317 0-4.433-.613-6.35-1.837-1.917-1.226-3.367-2.88-4.35-4.963a.812.812 0 0 1-.1-.313 2.93 2.93 0 0 1 0-.774.812.812 0 0 1 .1-.313c.983-2.083 2.433-3.738 4.35-4.963C7.567 4.614 9.683 4 12 4c2.317 0 4.433.612 6.35 1.838 1.917 1.224 3.367 2.879 4.35 4.962a.81.81 0 0 1 .1.313 2.925 2.925 0 0 1 0 .774.81.81 0 0 1-.1.313c-.983 2.083-2.433 3.738-4.35 4.963C16.433 18.387 14.317 19 12 19Zm0-2a9.544 9.544 0 0 0 5.188-1.488A9.773 9.773 0 0 0 20.8 11.5a9.773 9.773 0 0 0-3.613-4.013A9.544 9.544 0 0 0 12 6a9.545 9.545 0 0 0-5.187 1.487A9.773 9.773 0 0 0 3.2 11.5a9.773 9.773 0 0 0 3.613 4.012A9.544 9.544 0 0 0 12 17Z"
      />
    </svg>
    <span
      class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_8j2l6_52"
    >
      View in timeline
    </span>
    <svg
      aria-hidden="true"
      class="_nav-hint_8j2l6_59"
      fill="currentColor"
      height="24"
      viewBox="8 0 8 24"
      width="8"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
      />
    </svg>
  </button>
  <button
    class="_item_8j2l6_17 _interactive_8j2l6_35"
    data-kind="primary"
    data-orientation="vertical"
    data-radix-collection-item=""
    role="menuitem"
    tabindex="-1"
  >
    <svg
      aria-hidden="true"
      class="_icon_8j2l6_43"
      fill="currentColor"
      height="24"
      viewBox="0 0 24 24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M14.597 5.708a1.004 1.004 0 0 1 0-1.416.996.996 0 0 1 1.412 0l4.699 4.714c.39.39.39 1.025 0 1.416l-4.7 4.714a.996.996 0 0 1-1.411 0 1.004 1.004 0 0 1 0-1.416l3.043-3.054H8.487C6.599 10.666 5 12.27 5 14.333 5.002 16.396 6.6 18 8.488 18h2.093a1 1 0 1 1 0 2H8.487C5.42 20 3 17.425 3 14.333c0-3.092 2.42-5.666 5.486-5.666h9.059l-2.95-2.959Z"
      />
    </svg>
    <span
      class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_8j2l6_52"
    >
      Forward
    </span>
    <svg
      aria-hidden="true"
      class="_nav-hint_8j2l6_59"
      fill="currentColor"
      height="24"
      viewBox="8 0 8 24"
      width="8"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
      />
    </svg>
  </button>
</div>
`;