Fix: hatchet-dev#285

shiv4nk4r · Jul 2, 2024 · e627646 · e627646
1 parent ad2b965
commit e627646
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 17 deletions.
diff --git a/frontend/app/package.json b/frontend/app/package.json
@@ -69,6 +69,7 @@
     "prism-react-renderer": "^2.3.0",
     "qs": "^6.11.2",
     "react": "^18.2.0",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.48.2",
     "react-icons": "^5.0.1",

diff --git a/frontend/app/src/components/ui/copy-to-clipboard.tsx b/frontend/app/src/components/ui/copy-to-clipboard.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Button } from './button';
 import { CopyIcon } from '@radix-ui/react-icons';
 import { CheckIcon } from '@heroicons/react/24/outline';
+import { CopyToClipboard as Copy } from 'react-copy-to-clipboard';
 import { cn } from '@/lib/utils';
 
 type Props = {
@@ -14,30 +15,33 @@ const CopyToClipboard: React.FC<Props> = ({ text, className, withText }) => {
   const [successCopy, setSuccessCopy] = useState(false);
 
   return (
-    <Button
-      className={cn(
-        className,
-        withText
-          ? 'cursor-pointer flex flex-row gap-2 items-center mt-2'
-          : 'w-6 h-6 p-0 cursor-pointer',
-      )}
-      variant={withText ? 'default' : 'ghost'}
-      onClick={() => {
-        navigator.clipboard.writeText(text);
+    <Copy
+      text={text}
+      onCopy={() => {
         setSuccessCopy(true);
 
         setTimeout(() => {
           setSuccessCopy(false);
         }, 2000);
       }}
     >
-      {successCopy ? (
-        <CheckIcon className="w-4 h-4" />
-      ) : (
-        <CopyIcon className="w-4 h-4" />
-      )}
-      {withText && (successCopy ? 'Copied' : 'Copy to clipboard')}
-    </Button>
+      <Button
+        className={cn(
+          className,
+          withText
+            ? 'cursor-pointer flex flex-row gap-2 items-center mt-2'
+            : 'w-6 h-6 p-0 cursor-pointer',
+        )}
+        variant={withText ? 'default' : 'ghost'}
+      >
+        {successCopy ? (
+          <CheckIcon className="w-4 h-4" />
+        ) : (
+          <CopyIcon className="w-4 h-4" />
+        )}
+        {withText && (successCopy ? 'Copied' : 'Copy to clipboard')}
+      </Button>
+    </Copy>
   );
 };