MapComplete/UI/Base/SubtleLink.svelte

<script lang="ts">
  import {onMount} from "svelte";
  import BaseUIElement from "../BaseUIElement";
  import Img from "./Img";

  export let imageUrl: string | BaseUIElement = undefined
  export let href: string
  export let newTab = false
  export let options: {
    imgSize?: string
    // extraClasses?: string
  } = {}
  

  let imgElem: HTMLElement;
  let imgClasses = "block justify-center shrink-0 mr-4 " + (options?.imgSize ?? "h-11 w-11");

  onMount(() => {
    // Image
    if (imgElem && imageUrl) {
      let img: BaseUIElement

      if ((imageUrl ?? "") === "") {
        img = undefined
      } else if (typeof imageUrl !== "string") {
        img = imageUrl?.SetClass(imgClasses)
      }
      if (img) imgElem.replaceWith(img.ConstructElement())
    }

  })
</script>

<a
  class={(options.extraClasses??"") + ' button text-ellipsis'}
  {href}
  target={(newTab ? "_blank" : undefined) }
>
  <slot name="image">
    {#if imageUrl !== undefined}
      {#if typeof imageUrl === "string"}
        <Img src={imageUrl} class={imgClasses}></Img>
      {:else }
        <template bind:this={imgElem} />
      {/if}
    {/if}
  </slot>

  <slot/>
</a>