feat(developer): add copy to clipboard to keys table and key page

Closes #276
agrc · May 16, 2024 · 04dbf92 · 04dbf92
1 parent 4a5570a
commit 04dbf92
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 17 deletions.
diff --git a/src/developer/src/components/CopyToClipboard.jsx b/src/developer/src/components/CopyToClipboard.jsx
@@ -21,8 +21,8 @@ export default function CopyToClipboard({ text, className }) {
     <CopyToClipboard_lib
       text={text}
       className={twMerge(
-        className,
         'h-8 cursor-pointer hover:text-wavy-400 dark:hover:text-mustard-500',
+        className,
       )}
       onCopy={() => setCopied(true)}
     >

diff --git a/src/developer/src/components/page/Key.jsx b/src/developer/src/components/page/Key.jsx
@@ -25,6 +25,7 @@ import { useRef } from 'react';
 import { useLoaderData, useNavigate, useParams } from 'react-router-dom';
 import { useFirestore, useFunctions } from 'reactfire';
 import { timeSince } from '../../../functions/time';
+import CopyToClipboard from '../CopyToClipboard';
 import EditableText from '../EditableText';
 import Button, { RouterButtonLink } from '../design-system/Button';
 import Card from '../design-system/Card';
@@ -200,9 +201,10 @@ export const Component = () => {
           <div>
             <h2
               id="key-creation"
-              className="uppercase text-wavy-600 dark:text-wavy-200"
+              className="flex items-center uppercase text-wavy-600 dark:text-wavy-200"
             >
               {key}
+              <CopyToClipboard text={key} className="ml-1 inline" />
             </h2>
             <p className="text-wavy-400">
               {status === 'pending' ? 'fetching metadata...' : data?.pattern}

diff --git a/src/developer/src/components/page/Keys.jsx b/src/developer/src/components/page/Keys.jsx
@@ -1,9 +1,9 @@
-import { InformationCircleIcon } from '@heroicons/react/20/solid';
 import { useQuery } from '@tanstack/react-query';
 import { createColumnHelper } from '@tanstack/react-table';
 import { httpsCallable } from 'firebase/functions';
 import { Link, useLoaderData } from 'react-router-dom';
 import { useFunctions } from 'reactfire';
+import CopyToClipboard from '../CopyToClipboard';
 import Button, { RouterButtonLink } from '../design-system/Button';
 import Spinner from '../design-system/Spinner';
 import Table from '../design-system/Table';
@@ -54,20 +54,11 @@ const columns = [
   // }),
   columnHelper.accessor('action', {
     header: null,
-    cell: (info) => {
-      return (
-        <div className="flex justify-end">
-          <InformationCircleIcon
-            className="h-6 cursor-pointer text-fuchsia-600 hover:text-fuchsia-900"
-            onClick={(event) => {
-              event.stopPropagation();
-
-              console.log(info.row.getValue('key'));
-            }}
-          />
-        </div>
-      );
-    },
+    cell: (info) => (
+      <div className="flex justify-end">
+        <CopyToClipboard text={info.row.getValue('key')} className="h-6" />
+      </div>
+    ),
   }),
 ];