feat: copy to clipboard (#2551)

* copy to clipboard feature added

* updated handleCopyClick function to use async await

* refactored the copy to clipboard function added react-children-utilities

components/ClipboardCopy.js

@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+import { onlyText } from "react-children-utilities";
+
+const ClipboardCopy = ({children}) => {
+   const [isCopied, setIsCopied] = useState(false);
+
+   async function copyTextToClipboard(text) {
+      if ("clipboard" in navigator) {
+         return await navigator.clipboard.writeText(text);
+      } else {
+         return document.execCommand("copy", true, text);
+      }
+   }
+
+   const handleCopyClick = async () => {
+      try {
+         await copyTextToClipboard(onlyText(children));
+         setIsCopied(true);
+         setTimeout(() => {
+            setIsCopied(false);
+         }, 1500);
+      } catch (error) {
+         console.log(err);
+      }
+   };
+
+   return (
+      <div className="relative">
+         <div className="absolute flex items-center space-x-2 top-0 right-0 m-2">
+            <button
+               type="button"
+               aria-label="Copy to Clipboard"
+               onClick={handleCopyClick}
+               className="transition rounded-md flex items-center justify-center text-center px-2 focus:outline-none fade-in group-hover:flex"
+            >
+               {isCopied ? (
+                  <span className="text-green-500 text-sm">Copied!</span>
+               ) : (
+                  <span className="text-gray-500 text-sm">Copy</span>
+               )}
+            </button>
+         </div>
+         {children}
+      </div>
+   );
+};
+
+export default ClipboardCopy;

package.json

@@ -18,6 +18,7 @@
     "next": "^13",
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
+    "react-children-utilities": "^2.8.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.6.0",
     "react-markdown": "^8.0.3",
@@ -89,4 +90,4 @@
   "bugs": {
     "url": "https://github.com/EddieHubCommunity/LinkFree/issues"
   }
-}
+}

pages/docs/quickstart.mdx

@@ -1,4 +1,5 @@
 import DocsLayout from "../../components/layouts/DocsLayout.js";
+import ClipboardCopy from "../../components/ClipboardCopy.js";
 
 ## Quickstart
 
@@ -29,6 +30,7 @@ To do this, you need a GitHub account. If you do not have one yet, you can creat
 
 8. For the file contents use the json structure below:
 
+<ClipboardCopy>
 ```js
 {
   "name": "Sara Jaoude",
@@ -38,6 +40,7 @@ To do this, you need a GitHub account. If you do not have one yet, you can creat
   "avatar": "https://github.com/SaraJaoude.png",
 }
 ```
+</ClipboardCopy>
 
 | field              | type                 | description                                                                                                   |
 | :----------------- | :------------------- | :------------------------------------------------------------------------------------------------------------ |
@@ -49,6 +52,7 @@ To do this, you need a GitHub account. If you do not have one yet, you can creat
 
 9. Now add links to your social media and other content (for example: website) so they appear on your Profile.
 
+<ClipboardCopy>
 ```js
   "links": [
     {
@@ -58,6 +62,7 @@ To do this, you need a GitHub account. If you do not have one yet, you can creat
     }
   ]
 ```
+</ClipboardCopy>
 
 | field | type   | description                                                                                                                                                                          |
 | :---- | :----- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -69,6 +74,7 @@ To do this, you need a GitHub account. If you do not have one yet, you can creat
 
 To add more links add another object inside the links collection. For example:
 
+<ClipboardCopy>
 ```js
   "links": [
     {
@@ -83,6 +89,7 @@ To add more links add another object inside the links collection. For example:
     }
   ]
 ```
+</ClipboardCopy>
 
 10. Scroll to the bottom and commit new file by adding the commit messsage that starts `data: ` followed by your GitHub username (for example `data: SaraJaoude`)