Update src/

src/components/CopyToClipboard.svelte

@@ -1,46 +1,46 @@
-<script>
+<script lang="ts">
   import Clipboard from '~/components/Clipboard.svelte'
+  import * as Icon from '~/icons'
 
-  export let text
-  let showTooltip = false
+  export let text: string
+  export let title = 'Copy to Clipboard'
+
+  let isCompleted = false
 
   function onSuccess() {
-    showTooltip = true
+    isCompleted = true
     setTimeout(() => {
-      showTooltip = false
+      isCompleted = false
     }, 2000)
   }
 </script>
 
-<Clipboard {text} on:copy={onSuccess} let:copy>
+<Clipboard {text} onCopy={onSuccess} let:copy>
   <button
     type="button"
-    on:click={copy}
-    class="relative flex items-center justify-center text-xs text-gray-500 dark:text-gray-100 w-7 h-7"
-    aria-label="Copy to Clipboard"
+    onclick={copy}
+    disabled={isCompleted}
+    class="relative flex items-center justify-center text-xs w-7 h-7"
+    class:cursor-pointer={!isCompleted}
+    aria-label={title}
+    {title}
   >
-    <svg
-      class="w-5 h-5"
-      fill="none"
-      stroke="currentColor"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-      ></path>
-    </svg>
-    <span class="hidden">Copy to Clipboard</span>
-    <div
-      role="tooltip"
-      class:hidden={!showTooltip}
-      class="tooltip inline-block absolute right-10 top-0 py-2 px-3 text-xs text-gray-100 rounded-md bg-black"
-    >
-      Copied!
+    <div class="text-gray-400">
+      {#if isCompleted}
+        <Icon.Check size={20} />
+      {:else}
+        <Icon.Copy size={20} />
+      {/if}
     </div>
+    <span class="hidden">Copy to Clipboard</span>
+    {#if isCompleted}
+      <div
+        role="tooltip"
+        class="tooltip absolute right-10 top-0 py-2 px-3 text-xs text-gray-100 rounded-md bg-black"
+      >
+        Copied!
+      </div>
+    {/if}
   </button>
 </Clipboard>