feat: Allow users to copy result to clipboard with button (#9)

* chore: remove time generated, as per design spec

* feat: Add copy to clipboard functionality

package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@vercel/analytics": "^0.1.11",
+    "@vueuse/core": "^10.1.0",
     "eventsource-parser": "^0.1.0",
     "node-html-parser": "^6.1.5",
     "vue": "^3.2.47"

src/App.vue

@@ -86,13 +86,12 @@
 
     <ResultCardLoading v-if="isLoading" class="w-full" />
 
-    <ul v-if="results.length">
+    <ul v-if="results.length" class="flex flex-col gap-10 sm:gap-20 lg:gap-40">
       <ResultCard
         v-for="(result, index) in results"
         :key="index"
         tag="li"
         class="flex flex-col-reverse border-4 border-neutral-200 rounded-2xl"
-        :time="result.generatedAt"
         :text="result.text"
         :order="results.length - index"
       />
@@ -190,7 +189,6 @@ const getCompletion = async () => {
 
   // Create and add a new pitch
   results.value.unshift({
-    generatedAt: new Date().toLocaleTimeString(),
     text: currentResultText.value,
   })
 

src/components/ResultCard.vue

@@ -3,33 +3,45 @@
     :is="tag"
     class="flex flex-col-reverse border-4 border-neutral-200 rounded-2xl"
   >
-    <h3
-      class="flex justify-end px-6 py-4 font-bold sm:justify-between bg-neutral-200"
+    <div
+      class="flex items-center justify-between px-6 py-4 font-bold bg-neutral-200"
     >
-      <span class="hidden sm:inline-block">
+      <BaseButton
+        @click="copy(text)"
+        v-if="isSupported"
+        class="flex gap-2"
+        :aria-label="`Copy pitch number ${order}`"
+      >
+        <span class="hidden sm:inline">{{ !copied ? 'Copy' : 'Copied!' }}</span>
         <img
-          src="../assets/images/icon-clock.png"
-          role="presentation"
-          class="inline h-6 mr-3"
+          class="w-6 h-6"
+          src="../assets/images/icon-copy-inverse.png"
+          alt=""
         />
-        Generated at {{ time }}
-      </span>
-      <span>Job Description #{{ order }}</span>
-    </h3>
+      </BaseButton>
+
+      <h3 class="ml-auto">Pop-out pitch #{{ order }}</h3>
+
+      <!-- Status so SR knows which pitch was copied -->
+      <p class="sr-only" v-show="copied" role="status">
+        Pop-out pitch #{{ order }} has been copied!
+      </p>
+    </div>
+
     <p class="px-6 pt-4 pb-6">{{ text }}</p>
   </component>
 </template>
 
 <script setup>
+import BaseButton from './BaseButton.vue'
+
+import { useClipboard } from '@vueuse/core'
+
 defineProps({
   tag: {
     type: String,
     default: 'li',
   },
-  time: {
-    type: String,
-    required: true,
-  },
   order: {
     type: [String, Number],
     required: true,
@@ -39,4 +51,6 @@ defineProps({
     required: true,
   },
 })
+
+const { isSupported, copy, copied } = useClipboard({ copiedDuring: 3000 })
 </script>

yarn.lock

@@ -2790,6 +2790,11 @@
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
   integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
 
+"@types/web-bluetooth@^0.0.16":
+  version "0.0.16"
+  resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz#1d12873a8e49567371f2a75fe3e7f7edca6662d8"
+  integrity sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==
+
 "@types/webpack-env@^1.16.0", "@types/webpack-env@^1.17.0":
   version "1.18.0"
   resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.18.0.tgz#ed6ecaa8e5ed5dfe8b2b3d00181702c9925f13fb"
@@ -3001,6 +3006,28 @@
     "@vue/compiler-dom" "^3.0.1"
     "@vue/server-renderer" "^3.0.1"
 
+"@vueuse/core@^10.1.0":
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-10.1.0.tgz#7c3246bea35b24298040b2576de06ce87f38f4c6"
+  integrity sha512-3Znoa5m5RO+z4/C9w6DRaKTR3wCVJvD5rav8HTDGsr+7rOZRHtcgFJ8NcCs0ZvIpmev2kExTa311ns5j2RbzDQ==
+  dependencies:
+    "@types/web-bluetooth" "^0.0.16"
+    "@vueuse/metadata" "10.1.0"
+    "@vueuse/shared" "10.1.0"
+    vue-demi ">=0.14.0"
+
+"@vueuse/[email protected]":
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-10.1.0.tgz#041ab49abb17e760170606199c612c8937d2968f"
+  integrity sha512-cM28HjDEw5FIrPE9rgSPFZvQ0ZYnOLAOr8hl1XM6tFl80U3WAR5ROdnAqiYybniwP5gt9MKKAJAqd/ab2aHkqg==
+
+"@vueuse/[email protected]":
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-10.1.0.tgz#1158713a69d33b84c473dbd078c0e8c587e6ab5f"
+  integrity sha512-2X52ogu12i9DkKOQ01yeb/BKg9UO87RNnpm5sXkQvyORlbq8ONS5l39MYkjkeVWWjdT0teJru7a2S41dmHmqjQ==
+  dependencies:
+    vue-demi ">=0.14.0"
+
 "@webassemblyjs/[email protected]":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"
@@ -11977,6 +12004,11 @@ void-elements@^3.1.0:
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
   integrity sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==
 
+vue-demi@>=0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.0.tgz#dcfd9a9cf9bb62ada1582ec9042372cf67ca6190"
+  integrity sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==
+
 vue-docgen-api@^4.44.15:
   version "4.60.0"
   resolved "https://registry.yarnpkg.com/vue-docgen-api/-/vue-docgen-api-4.60.0.tgz#2d85cb4df5ba0649735294d26ceac1d1a421afd0"