feature/Add copy/paste button for response body

index.html

@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="/styles/androidstudio.min.css" />
     <script src="/js/highlight.min.js"></script>
     <script src="/js/highlightjs-line-numbers.min.js"></script>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <style>
       .loading-page {
         display: flex;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "api-explorer",
-  "version": "1.0.29",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
     "dev": "vite & ts-node server/app.ts",

src/components/Preview.vue

@@ -263,11 +263,9 @@ const copyToClipboard = () => {
       <input type="text" v-show="exampleRequestBody" v-model="exampleRequestBody" />
     </div>
     <div v-show="successResponseBody">
-      <pre><span>{{ responseHeaderTitle }}:</span>
-        <code>
-          <div id="code" v-html="successResponseBody"></div>
-        </code>
-      </pre>
+      <p class="header-container">{{ responseHeaderTitle }}:</p>
+      <pre><button @click="copyToClipboard" class="copy-button icon-md-heavy" title="Copy to Clipboard"><i class="material-icons">content_copy</i></button>
+        <code><div id="code" v-html="successResponseBody"></div></code></pre>
     </div>
     <el-form ref="roleFormRef" :model="roleForm">
       <div v-show="showRequiredRoles">
@@ -456,4 +454,29 @@ li {
 #conector-method-link {
   color: white !important;
 }
+.copy-button {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.copy-button .material-icons {
+  font-size: 20px;
+  color: #757575;
+  transition: color 0.2s ease, transform 0.2s ease;
+}
+
+.copy-button:hover .material-icons {
+  color: #424242;
+  transform: scale(1.1);
+}
+
+.copy-button:active .material-icons {
+  color: #212121;
+  transform: scale(0.95);
+}
 </style>