From 74ae0b41e4a7ddab3689b4c667261723d287979a Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Wed, 1 Feb 2023 12:55:28 -0500
Subject: [PATCH] reinstate clipboard functionality. Fixes #336

---
 .../basic-cards/ClipboardCopy/index.tsx       | 34 +++++++++++++++++++
 .../basic-cards/DescriptionCard/index.tsx     |  5 ++-
 .../basic-cards/EventCodeCard/index.tsx       |  3 +-
 .../basic-cards/EventKeyCard/index.tsx        |  3 +-
 .../basic-cards/EventLocationCard/index.tsx   |  3 +-
 .../basic-cards/EventWhichCard/index.tsx      |  3 +-
 6 files changed, 46 insertions(+), 5 deletions(-)
 create mode 100644 components/key-code-cards/basic-cards/ClipboardCopy/index.tsx

diff --git a/components/key-code-cards/basic-cards/ClipboardCopy/index.tsx b/components/key-code-cards/basic-cards/ClipboardCopy/index.tsx
new file mode 100644
index 0000000..0432122
--- /dev/null
+++ b/components/key-code-cards/basic-cards/ClipboardCopy/index.tsx
@@ -0,0 +1,34 @@
+import { useState } from 'react'
+
+export const ClipboardCopy = ({
+  children
+}: {
+  children: string | undefined | number | null
+}): JSX.Element => {
+  const [copied, setCopied] = useState(false)
+
+  function copyToClipboard() {
+    if (typeof children === 'undefined' || children === null) {
+      return
+    }
+    navigator.clipboard.writeText(children.toString())
+
+    setCopied(true)
+    setTimeout(() => {
+      setCopied(false)
+    }, 200)
+  }
+
+  return (
+    <div
+      style={{
+        cursor: 'pointer',
+        scale: copied ? `1.15` : `1`,
+        transition: 'scale 0.2s ease-in-out'
+      }}
+      onClick={copyToClipboard}
+    >
+      {children}
+    </div>
+  )
+}
diff --git a/components/key-code-cards/basic-cards/DescriptionCard/index.tsx b/components/key-code-cards/basic-cards/DescriptionCard/index.tsx
index cc91ca1..fc872cd 100644
--- a/components/key-code-cards/basic-cards/DescriptionCard/index.tsx
+++ b/components/key-code-cards/basic-cards/DescriptionCard/index.tsx
@@ -1,4 +1,5 @@
 import BasicCardContainer from '../BasicCardContainer'
+import { ClipboardCopy } from '../ClipboardCopy'
 
 import { TestIdEventDescriptionCard } from './test-ids'
 
@@ -16,7 +17,9 @@ const DescriptionCard = ({ description }: DescriptionCard): JSX.Element => {
       description={cardDescriptions.description}
       testId={TestIdEventDescriptionCard.EventDescriptionCardContainer}
     >
-      {description ?? siteCopy.content.noDescription}
+      <ClipboardCopy>
+        {description ?? siteCopy.content.noDescription}
+      </ClipboardCopy>
     </BasicCardContainer>
   )
 }
diff --git a/components/key-code-cards/basic-cards/EventCodeCard/index.tsx b/components/key-code-cards/basic-cards/EventCodeCard/index.tsx
index 416e515..ad5f0f9 100644
--- a/components/key-code-cards/basic-cards/EventCodeCard/index.tsx
+++ b/components/key-code-cards/basic-cards/EventCodeCard/index.tsx
@@ -1,4 +1,5 @@
 import BasicCardContainer from '../BasicCardContainer'
+import { ClipboardCopy } from '../ClipboardCopy'
 
 import { TestIdEventCodeCard } from './test-ids'
 
@@ -17,7 +18,7 @@ const EventCodeCard = ({ code }: EventCodeCard): JSX.Element => {
       description={cardDescriptions.eventCode}
       testId={TestIdEventCodeCard.EventCodeCardContainer}
     >
-      {code}
+      <ClipboardCopy>{code}</ClipboardCopy>
     </BasicCardContainer>
   )
 }
diff --git a/components/key-code-cards/basic-cards/EventKeyCard/index.tsx b/components/key-code-cards/basic-cards/EventKeyCard/index.tsx
index 5b6c41e..f1db806 100644
--- a/components/key-code-cards/basic-cards/EventKeyCard/index.tsx
+++ b/components/key-code-cards/basic-cards/EventKeyCard/index.tsx
@@ -1,4 +1,5 @@
 import BasicCardContainer from '../BasicCardContainer'
+import { ClipboardCopy } from '../ClipboardCopy'
 
 import { TestIdEventKeyCard } from './test-ids'
 
@@ -16,7 +17,7 @@ const EventKeyCard = ({ eventKey }: EventKeyCard): JSX.Element => {
       description={cardDescriptions.eventKey}
       testId={TestIdEventKeyCard.EventKeyCardContainer}
     >
-      {eventKey}
+      <ClipboardCopy>{eventKey}</ClipboardCopy>
       {eventKey === siteCopy.content.whiteSpace && (
         <small>{siteCopy.content.blankSpace}</small>
       )}
diff --git a/components/key-code-cards/basic-cards/EventLocationCard/index.tsx b/components/key-code-cards/basic-cards/EventLocationCard/index.tsx
index e6e955e..acbaaae 100644
--- a/components/key-code-cards/basic-cards/EventLocationCard/index.tsx
+++ b/components/key-code-cards/basic-cards/EventLocationCard/index.tsx
@@ -1,4 +1,5 @@
 import BasicCardContainer from '../BasicCardContainer'
+import { ClipboardCopy } from '../ClipboardCopy'
 
 import { TestIdEvenLocationCard } from './test-ids'
 
@@ -23,7 +24,7 @@ const EventLocationCard = ({ keyLocation }: EventLocationCard): JSX.Element => {
       title={siteCopy.cards.eventLocation}
       description={cardDescriptions.eventLocation}
     >
-      {location}
+      <ClipboardCopy>{location}</ClipboardCopy>
     </BasicCardContainer>
   )
 }
diff --git a/components/key-code-cards/basic-cards/EventWhichCard/index.tsx b/components/key-code-cards/basic-cards/EventWhichCard/index.tsx
index 32dd39b..b16f13b 100644
--- a/components/key-code-cards/basic-cards/EventWhichCard/index.tsx
+++ b/components/key-code-cards/basic-cards/EventWhichCard/index.tsx
@@ -1,4 +1,5 @@
 import BasicCardContainer from '../BasicCardContainer'
+import { ClipboardCopy } from '../ClipboardCopy'
 
 import { TestIdEvenWhichCard } from './test-ids'
 
@@ -16,7 +17,7 @@ const EventWhichCard = ({ which }: EventWhichCardProps): JSX.Element => {
       description={cardDescriptions.eventWhich}
       testId={TestIdEvenWhichCard.EventWhichCardContainer}
     >
-      {which}
+      <ClipboardCopy>{which}</ClipboardCopy>
     </BasicCardContainer>
   )
 }