From f3168839fe07d83e3e40dba2d78e9eba3e73cf80 Mon Sep 17 00:00:00 2001
From: novellac <38117965+novellac@users.noreply.github.com>
Date: Sat, 22 Apr 2023 16:13:41 -0400
Subject: [PATCH] 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                            |   1 +
 src/App.vue                             |   4 +--
 src/assets/images/icon-copy-inverse.png | Bin 0 -> 1165 bytes
 src/components/ResultCard.vue           |  42 ++++++++++++++++--------
 yarn.lock                               |  32 ++++++++++++++++++
 5 files changed, 62 insertions(+), 17 deletions(-)
 create mode 100644 src/assets/images/icon-copy-inverse.png

diff --git a/package.json b/package.json
index 4dc4022..09f4112 100644
--- a/package.json
+++ b/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"
diff --git a/src/App.vue b/src/App.vue
index 881f1a9..6f51b4c 100644
--- a/src/App.vue
+++ b/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,
   })
 
diff --git a/src/assets/images/icon-copy-inverse.png b/src/assets/images/icon-copy-inverse.png
new file mode 100644
index 0000000000000000000000000000000000000000..b9daa6666962ded0b3a565791f2e28a7c51b678a
GIT binary patch
literal 1165
zcmV;81akX{P)<h;3K|Lk000e1NJLTq003YB003YJ1^@s6;+S_h00009a7bBm001mY
z001mY0i`{bsQ>@~0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1R_a9K~#7F?VasW
z+%OP^-^=8GE)~S708#-?1xY$E6$C2aQURfYg9<_i=TyL@g1b}@I@oBD85oYkk}X*)
zvCoXg1Ne)5Woflq%YdRNilQirq9}?oDKiLzh~{Qfn=*Gi<kpn+Y&P3M8HX|ccT@h+
zFqWoNP=?VNe=Ijp{NZNDlnsU91R3!LGN?_d5QZ8V@fHy<wXimuLsJe+=XmUJh--)I
z!aJ9p%sn=+qOVaxC*Cz9XSCai_8ON3qi|e1+%8}9^2u>a%C!^c8>jtk_y@;xY$yzk
z<Mmd1jz2?A^cdgAAR(TDpKyd;c6aj;f%<E%k5LXyxgmepm<!MA^ig91Mva8KnzHEG
z?bdW~@8Ne|?l%q{ci;MUpyvEbvuV(O-j9$BxwqR51mSVtUm+FpYqK{H0$ESZl_jKN
zZf-$-ERYzo4uemuNleArfp-097iuJe28KHjnW;k&zs&#S+PQ{?o0AH{m|6h#ZdNp5
z=hoGHj*^P(P*VisSOk6&&METHziaZ?_^F<{cns_Vp0Y8e2`vO!4{b#OKxCpsLp`Wq
z+h#UeYc{`Oqm#GrW8R(X0Jf<K8C{J^Y5^WoBePh32&7ENyjoO%#Hav?Q2`R80whKS
zNQ?@Q7!@Efk_KX9;n6dvr2OrE{(=%?K=)9XSWqZ9xHo_19y!i5G}-qKM5cr%;L1#%
zH_!dS{Qk1Dq1dU#-1~sN#=nO}Fq;-a$ytD2<3HjLgp#WOKE`K!!`qXQqX53fXPoj=
zQ;?eg-o__8+g3v;ISDYN<}>FIm<@4HE&>cPKH1DRx#@+-Lx3^HZy+4$0u*h0MzR3K
z8=sLXz^gDmBQX{<)c6gox6>jZ<epH>Z(2?_;G;Ov&`St|{NUHCyh7lTnxN}}e!e8w
z_%|L;jVJ+5Q4Y@GZz%$_g)KKzxjqF_1lXcHDwmz42;lV^YbH2(L{bDeB8N34GGYry
zcUX!5Z2Y{|Xn2_m*D--4FX)7FTPR}}Hu|YCzVq@7(niAk?lDiK|9~f*coo9qvfdHH
z#&0JZ4O85_AnzxE`d4ik1R^6f7`N~hp&LhhMrJOp<Z$$>5JCEcOz|S*FeO>E2)Rtk
z7b`+eX(?kw5KC@}Swlr=A(R|b6TL-%T>?QQxhCfh5kVw5r>Fafa0H>`{(?rY2&Bom
z(b+3PXZ#feQ_5SCEJ9<p7qIIM@%#ceI}L=d9W+J&X>XlWu&L--F{TOHqI}kf%oqWp
z-<$yC3SdT<Ey@?+3XvJ>1zn(A)?Fow%IFWd8SjJLyc%V}4#uY`vh_lY1HPfWrs#O8
zRLRi-bXfo#@{QhJPQVtn<~w}|NE{S!#oCFv`veLl$j*!MF;9B<1W5(?l$M#TD2k#e
filQirqP)a^J;da*t>SfV00000NkvXXu0mjfl=lb5

literal 0
HcmV?d00001

diff --git a/src/components/ResultCard.vue b/src/components/ResultCard.vue
index 1521e2c..617d189 100644
--- a/src/components/ResultCard.vue
+++ b/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>
diff --git a/yarn.lock b/yarn.lock
index 9d8551c..c96602b 100644
--- a/yarn.lock
+++ b/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/metadata@10.1.0":
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-10.1.0.tgz#041ab49abb17e760170606199c612c8937d2968f"
+  integrity sha512-cM28HjDEw5FIrPE9rgSPFZvQ0ZYnOLAOr8hl1XM6tFl80U3WAR5ROdnAqiYybniwP5gt9MKKAJAqd/ab2aHkqg==
+
+"@vueuse/shared@10.1.0":
+  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/ast@1.11.1":
   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"