Nouveau portail

src/lib/components/transverse_pages/AnchorTitle.svelte

+<script lang="ts">
+  import CopyClipboard from "$lib/components/transverse_pages/CopyClipboard.svelte"
+
+  export let id: string
+  export let tag = "h2"
+
+  let clipboardElement: HTMLElement
+  let linkCopied = false
+
+  function copyUrl() {
+    if (id === undefined) {
+      return
+    }
+    const baseUrl = window.location.origin + window.location.pathname
+    const urlWithAnchor = `${baseUrl}#${id}`
+    const copyClipboard = new CopyClipboard({
+      target: clipboardElement,
+      props: { value: urlWithAnchor },
+    })
+    copyClipboard.$destroy()
+    linkCopied = true
+    setTimeout(() => {
+      linkCopied = false
+    }, 2000)
+  }
+</script>
+
+<div bind:this={clipboardElement} />
+
+<svelte:element
+  this={tag}
+  {...$$restProps}
+  {id}
+  class="relative group {$$props.class ?? ''}"
+>
+  <button class="absolute -ml-8 mt-1 h-6" on:click={copyUrl}>
+    <iconify-icon
+      class="group-hover:text-black text-neutral-400 text-2xl"
+      icon="ri-links-line"
+    />
+
+    {#if linkCopied}
+      <span
+        class="absolute -top-2 left-1/2 -translate-x-1/2 -translate-y-full bg-le-vert-800 text-white px-2 py-1 text-sm text-nowrap rounded-md font-sans font-normal z-50"
+        >Lien copié !</span
+      >
+    {/if}
+  </button>
+  <slot />
+</svelte:element>