feat: Create a useClipboard hook. Move copy clipboard code into a uti…

…l function

src/hooks/useClipboard.js

@@ -0,0 +1,26 @@
+import { useEffect, useState, useCallback } from 'react';
+import copyToClipboard from '../utils/copyToClipboard';
+
+const useClipboard = ({ duration = 1000 } = {}) => {
+  const [copied, setCopied] = useState(false);
+  const copy = useCallback((text) => {
+    copyToClipboard(text);
+    setCopied(true);
+  }, []);
+
+  useEffect(() => {
+    if (copied && duration) {
+      const id = setTimeout(() => {
+        setCopied(false);
+      }, duration);
+
+      return () => {
+        clearTimeout(id);
+      };
+    }
+  }, [copied, duration]);
+
+  return [copied, copy];
+};
+
+export default useClipboard;

src/utils/copyToClipboard.js

@@ -0,0 +1,11 @@
+const copyToClipboard = (text) => {
+  const textArea = document.createElement('textarea');
+
+  textArea.value = text;
+  document.body.appendChild(textArea);
+  textArea.select();
+  document.execCommand('copy');
+  document.body.removeChild(textArea);
+};
+
+export default copyToClipboard;