Add copy button

components/ExportModalTabs.jsx

@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { CopyToClipboard } from 'react-copy-to-clipboard'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism'
 
@@ -7,6 +8,25 @@ import { useAppContext } from '@contexts/AppContext'
 import styles from '@styles/ExportModalTabs.module.scss'
 import generateColorVariables from '@functions/generateColorVariables'
 
+const CopyButton = ({ code }) => {
+  const [isFlashing, setIsFlashing] = useState(false)
+  const toggleIsFlashing = () => {
+    setIsFlashing(true)
+    setTimeout(() => setIsFlashing(false), 300)
+  }
+
+  return (
+    <CopyToClipboard
+      text={code}
+      onCopy={() => toggleIsFlashing()}
+    >
+      <button className={clx(styles.copyButton, isFlashing ? styles.flashing : '')}>
+        C
+      </button>
+    </CopyToClipboard>
+  )
+}
+
 export default () => {
   const { state } = useAppContext()
   const { colors } = state
@@ -41,17 +61,21 @@ export default () => {
         tabs.map((tab, key) => {
           if (key !== activeButtonKey) return null
 
+          const code = colorVariables[tab.id]
+
           return (
             <div
               key={key}
               className={styles.content}
             >
+              <CopyButton code={code} />
+
               <SyntaxHighlighter
                 style={oneDark}
                 language={tab.id}
                 className={styles.syntaxHighlighter}
               >
-                {colorVariables[tab.id]}
+                {code}
               </SyntaxHighlighter>
             </div>
           )

styles/ExportModalTabs.module.scss

@@ -28,6 +28,30 @@
 
   .content {
     max-height: 250px;
+    position: relative;
+
+    .copyButton {
+      top: 10px;
+      right: 10px;
+      display: flex;
+      font-weight: 600;
+      padding: 5px 10px;
+      position: absolute;
+      border-radius: 5px;
+      align-items: center;
+      transition: all 150ms;
+      background-color: #fff;
+      justify-content: center;
+      &:hover {
+        background-color: darken(#fff, 10%);
+      }
+      &:active {
+        background-color: darken(#fff, 20%);
+      }
+      &.flashing {
+        background-color: #2ecc71;
+      }
+    }
 
     .syntaxHighlighter {
       max-height: 250px;