add: click to copy

Author: Hetari

src/components/code-block/CodeBlock.vue

@@ -21,12 +21,13 @@
           <span>{{ props.fileName }}</span>
         </div>
         <div
-          @click="copyCodeToClipboard(props.code)"
+          @click="copyCode"
           class="actions">
           <button
             type="button"
             class="copy-button">
             <svg
+              v-if="!copied"
               fill="none"
               stroke="currentColor"
               stroke-width="1.5"
@@ -39,6 +40,17 @@
               <path
                 d="M18 12.25h-4a1 1 0 0 1-1-1v-1.5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5a1 1 0 0 1-1 1ZM13.75 16.25h4.5M13.75 19.25h4.5"></path>
             </svg>
+            <svg
+              v-else
+              class="check-icon"
+              viewBox="0 0 36 36">
+              <path
+                fill="#77B255"
+                d="M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4v28z"></path>
+              <path
+                fill="#FFF"
+                d="M29.28 6.362a2.502 2.502 0 0 0-3.458.736L14.936 23.877l-5.029-4.65a2.5 2.5 0 1 0-3.394 3.671l7.209 6.666c.48.445 1.09.665 1.696.665c.673 0 1.534-.282 2.099-1.139c.332-.506 12.5-19.27 12.5-19.27a2.5 2.5 0 0 0-.737-3.458z"></path>
+            </svg>
           </button>
         </div>
       </div>
@@ -89,6 +101,16 @@
   const codeBlock: Ref<HTMLDivElement | null> = ref(null);
   const code = computed(() => parseCodeIntoLines(props.code, props.language));
   const currentTheme = computed(() => themes[props.theme]);
+  const copied = ref(false);
+
+  const copyCode = () => {
+    copied.value = true;
+    copyCodeToClipboard(props.code);
+
+    setTimeout(() => {
+      copied.value = false;
+    }, 2000);
+  };
 
   onMounted(() => {
     addThemeToCodeBlock(codeBlock.value, currentTheme.value);
@@ -165,6 +187,13 @@
     height: 2rem;
   }
 
+  .vuejs-code-block pre .header .actions .check-icon {
+    width: 2rem;
+    height: 2rem;
+    scale: 0.8;
+    object-position: center;
+  }
+
   .vuejs-code-block pre .line {
     padding: 0 1rem;
     display: flex;