1  <script lang="ts">
 2    import { copyToClipboard } from "$lib/utils";
 3    import { truncateText } from "$lib/utils";
 4  
 5    import Icon from "./Icon.svelte";
 6  
 7    let { rid }: { rid: string } = $props();
 8  
 9    let hovering = $state(false);
10    let copied = $state(false);
11  </script>
12  
13  <div class="flex font-mono text-text-tertiary">
14    <button
15      class="line-clamp-1 flex cursor-pointer items-center gap-1 truncate text-left break-all hover:underline"
16      onmouseenter={() => {
17        hovering = true;
18      }}
19      onmouseleave={() => {
20        hovering = false;
21      }}
22      onclick={e => {
23        e.stopPropagation();
24        e.preventDefault();
25        copyToClipboard(rid);
26        copied = true;
27        setTimeout(() => {
28          copied = false;
29        }, 2000);
30      }}>
31      {truncateText(rid, 6)}
32      {#if hovering && !copied}
33        <Icon name="copy" />
34      {:else if hovering && copied}
35        <Icon name="checkmark" />
36      {/if}
37    </button>
38  </div>