From abe1ce7d76b73958678ec2cadfffec69254aa58e Mon Sep 17 00:00:00 2001
From: Kelvin Hsu <kelvin.hsu@binarystar.ca>
Date: Sat, 5 Oct 2024 20:27:44 -0300
Subject: [PATCH] added in a copy btn

---
 src/LangTag.svelte | 51 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)

diff --git a/src/LangTag.svelte b/src/LangTag.svelte
index 2e181ab3..f8eaac99 100644
--- a/src/LangTag.svelte
+++ b/src/LangTag.svelte
@@ -12,8 +12,36 @@
 
   /** @type {boolean} */
   export let langtag = false;
+
+  let copyBtnText = "Copy";
+  function onCopyBtnClicked() {
+    copyBtnText = "Copied!";
+    setTimeout(() => {
+      copyBtnText = "Copy";
+    }, 1000);
+    navigator.clipboard.writeText(code);
+  }
 </script>
 
+<div class="copy-btn-container">
+  <button class="copy-btn" on:click={() => onCopyBtnClicked()}>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="copy-icon"
+      ><rect width="14" height="14" x="8" y="8" rx="2" ry="2" /><path
+        d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+      /></svg
+    >
+    <span class="copy-text">{copyBtnText}</span>
+  </button>
+</div>
+
 <pre class:langtag data-language={languageName} {...$$restProps}><code
     class:hljs={true}
     >{#if highlighted}{@html highlighted}{:else}{code}{/if}</code
@@ -37,4 +65,27 @@
     border-radius: var(--langtag-border-radius, 0);
     padding: var(--langtag-padding, 1em);
   }
+
+  .copy-btn-container {
+    width: 100%;
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    float: right;
+    padding: 5px;
+  }
+
+  .copy-btn {
+    display: flex;
+    align-items: center;
+    background: var(--langtag-background, inherit);
+    color: var(--langtag-color, inherit);
+    border: none;
+  }
+
+  .copy-icon {
+    width: 20px;
+    height: 20px;
+    padding-right: 5px;
+  }
 </style>