From 124894fdf9d1057e487764f35fb4de5521007312 Mon Sep 17 00:00:00 2001
From: khatabwedaa <khatabwedaa@gmail.com>
Date: Sat, 13 Jun 2020 22:54:20 +0200
Subject: [PATCH] Add copy button on code snippet

---
 src/components/Header.vue                  |  7 +++----
 src/components/utilities/CodeSnippet.vue   | 14 +++++++++++++-
 src/components/utilities/ViewComponent.vue |  3 ++-
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/Header.vue b/src/components/Header.vue
index ba8bb8f..b4482cc 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -4,8 +4,7 @@
             <div class="container mx-auto px-6 py-4">
                 <div class="flex justify-between items-center">
                     <a href="/" class="text-white text-xl font-bold md:text-2xl inline-flex items-center hover:text-blue-400">
-                        <img class="h-10 w-10 mr-1" src="../assets/svg/logo.svg" alt="logo">
-                        Meraki <span class="text-blue-400">UI</span>
+                        <img class="h-10 w-10 mr-1" src="../assets/svg/logo.svg" alt="logo"> Meraki <span class="text-blue-400">UI</span>
                     </a>
 
                     <a class="text-white text-sm font-normal hover:text-blue-400" href="https://github.com/merakiui/website" target="_blank" aria-label="Github link">
@@ -18,8 +17,8 @@
         </nav>
 
         <div class="bg-gray-900">
-            <div class="container mx-auto px-6">
-                <div class="md:flex py-8 md:py-0">
+            <div class="container mx-auto px-6 py-8">
+                <div class="md:flex">
                     <div class="flex items-center w-full md:w-1/2">
                         <div class="max-w-sm text-white">
                             <div class="text-xs font-light">Simple UI Starter</div>
diff --git a/src/components/utilities/CodeSnippet.vue b/src/components/utilities/CodeSnippet.vue
index c4e6446..30ba228 100644
--- a/src/components/utilities/CodeSnippet.vue
+++ b/src/components/utilities/CodeSnippet.vue
@@ -1,6 +1,14 @@
 <template>
-    <div class="rounded overflow-hidden">
+    <div class="relative rounded overflow-hidden">
         <pre><code class="px-8 py-6 rounded-md overflow-x-scroll overflow-hidden text-sm">{{ code }}</code></pre>
+
+        <div class="absolute right-0 top-0">
+            <button class="px-3 py-2 text-gray-600 hover:text-gray-400 focus:outline-none" v-clipboard:success="onCopy" v-clipboard:copy="code">
+                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6">
+                    <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
+                </svg>
+            </button>
+        </div>
     </div>
 </template>
 
@@ -24,6 +32,10 @@ export default {
                 });
             });
         },
+
+        onCopy() {
+            this.$emit("onCopy");
+        }
     },
 }
 </script>
diff --git a/src/components/utilities/ViewComponent.vue b/src/components/utilities/ViewComponent.vue
index 6aad647..4ebac01 100644
--- a/src/components/utilities/ViewComponent.vue
+++ b/src/components/utilities/ViewComponent.vue
@@ -3,6 +3,7 @@
         <div class="bg-white px-4 py-2 border-b">
             <div class="flex flex-col md:flex-row justify-between items-center">
                 <div class="text-gray-700 font-medium capitalize md:text-lg">{{ name }}</div>
+
                 <div class="mt-4 md:mt-0">
                     <button @click="rtl =! rtl" class="rounded-md p-1 hover:text-gray-700 hover:bg-gray-400 focus:outline-none" :class="rtl? 'bg-gray-400 text-gray-700' : 'bg-gray-200 text-gray-600'" aria-label="Rtl">
                         <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none">
@@ -46,7 +47,7 @@
         </div>
 
         <div v-if="viewCode">
-            <code-snippet :code="code"></code-snippet>
+            <code-snippet @onCopy="onCopy" :code="code"></code-snippet>
         </div>
     </div>
 </template>