add copy tag

components/editor/main/snippet/index.tsx

@@ -1,8 +1,11 @@
-import { ApiRoute } from "@/utils/type";
-import classNames from "classnames";
 import { useState } from "react";
+import { useCopyToClipboard } from "react-use";
+import classNames from "classnames";
 import Highlight from "react-highlight";
 import { Options } from "redaxios";
+import { BiSolidCopy } from "react-icons/bi";
+
+import { ApiRoute } from "@/utils/type";
 
 const LANGUAGES = ["curl", "javascript", "python"];
 
@@ -16,6 +19,8 @@ export const Snippet = ({
   body?: Options | undefined;
 }) => {
   const [language, setLanguage] = useState<string>(LANGUAGES[0]);
+  const [_, copyToClipboard] = useCopyToClipboard();
+  const [isCopied, setIsCopied] = useState<boolean>(false);
 
   const generateRequestFromEndpoint = () => {
     const { method, path } = endpoint;
@@ -89,6 +94,14 @@ export const Snippet = ({
     return "";
   };
 
+  const handleCopyToClipboard = () => {
+    copyToClipboard(generateRequestFromEndpoint());
+    setIsCopied(true);
+    setTimeout(() => {
+      setIsCopied(false);
+    }, 2000);
+  };
+
   return (
     <div className="mt-8 grid grid-cols-1 gap-4 w-full">
       <p className="text-slate-200 uppercase text-xs font-semibold">Snippet</p>
@@ -115,9 +128,22 @@ export const Snippet = ({
           >
             {generateRequestFromEndpoint()}
           </Highlight>
-          {/* <pre className="text-slate-300 text-xs font-medium">
-            {generateCurlRequestFromEndpoint()}
-          </pre> */}
+          <div
+            className="flex justify-end relative"
+            onClick={handleCopyToClipboard}
+          >
+            <BiSolidCopy className="text-slate-500 cursor-pointer hover:text-slate-300 transition-all duration-75" />
+            <div
+              className={classNames(
+                "bg-indigo-500/60 text-slate-100 text-xs font-semibold absolute bottom-0 right-0 z-10 rounded-lg px-2 py-1 pointer-events-none -translate-y-full transition-all duration-200",
+                {
+                  "opacity-0": !isCopied,
+                }
+              )}
+            >
+              Copied!
+            </div>
+          </div>
         </main>
       </div>
     </div>