feat(docs): create clipboard copy component

2026-02-11 13:23:02 -05:00 · 2023-11-22 17:28:13 +05:45
parent 71a5e56886
commit fa2f77752f
2 changed files with 94 additions and 41 deletions
--- a/docs/src/components/ClipboardCopy.astro
+++ b/docs/src/components/ClipboardCopy.astro
@@ -0,0 +1,90 @@
+---
+const { copyText } = Astro.props;
+---
+
+<span class="copy-container">
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    role="img"
+    class="copy-button"
+    viewBox="0 0 16 16"
+    width="16"
+    height="16"
+    style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible;"
+    fill="currentColor"
+    ><path
+      d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"
+    ></path><path
+      d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
+    ></path></svg
+  >
+  <svg
+    style="display:none;user-select:none;vertical-align:text-bottom;overflow:visible;"
+    aria-hidden="true"
+    height="16"
+    viewBox="0 0 16 16"
+    version="1.1"
+    width="16"
+    data-view-component="true"
+    class="copied-checkmark"
+    ><path
+      d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+    ></path></svg
+  >
+  <span class="tooltipText">Copy</span>
+</span>
+
+<script define:vars={{ copyText }}>
+  const commandCopyBtn = document.querySelector('.copy-button');
+  const copiedCheckMark = document.querySelector('.copied-checkmark');
+  const tooltipText = document.querySelector('.tooltipText');
+  const container = document.querySelector('.copy-container');
+
+  container.addEventListener('mouseleave', () => {
+    copiedCheckMark.style.display = 'none';
+    commandCopyBtn.style.display = 'inline-block';
+    tooltipText.innerHTML = 'Copy';
+  });
+  commandCopyBtn.addEventListener('click', () => {
+    navigator.clipboard.writeText(copyText);
+    tooltipText.innerHTML = 'Copied';
+    copiedCheckMark.style.display = 'inline-block';
+    commandCopyBtn.style.display = 'none';
+  });
+</script>
+
+<style>
+  .copy-button {
+    fill: var(--sl-color-accent-high);
+    margin-left: 0.5rem;
+    cursor: pointer;
+  }
+
+  .copied-checkmark {
+    fill: var(--sl-color-accent-high);
+    margin-left: 0.5rem;
+    display: none;
+  }
+
+  .copy-container:hover .tooltipText {
+    visibility: visible;
+  }
+  .copy-container {
+    position: relative;
+  }
+
+  .tooltipText {
+    position: absolute;
+    visibility: hidden;
+    left: 0;
+    width: max-content;
+    background-color: white;
+    display: block;
+    color: black;
+    padding: 0.125rem 0.25rem;
+    border-radius: 0.25rem;
+    top: 130%;
+    font-size: 0.5rem;
+  }
+</style>