Added Functionality for cope the code to clipboard

Author: nomandhoni-cs

src/components/common/CopyToClipboard.js

@@ -0,0 +1,28 @@
+import React, { useState } from "react"
+import { BsCopy } from "react-icons/bs"
+import { BsCheckLg } from "react-icons/bs"
+function CopyToClipboard({ textToCopy }) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = () => {
+    navigator.clipboard
+      .writeText(textToCopy)
+      .then(() => {
+        setCopied(true)
+        setTimeout(() => setCopied(false), 1500)
+      })
+      .catch(error => {
+        console.error("Error copying text to clipboard:", error)
+      })
+  }
+
+  return (
+    <>
+      <div onClick={handleCopy} style={{ cursor: "pointer" }}>
+        {copied ? <BsCheckLg /> : <BsCopy />}
+      </div>
+    </>
+  )
+}
+
+export default CopyToClipboard

src/components/common/Sheet.js

@@ -1,6 +1,7 @@
 import React from "react"
 import styled from "@emotion/styled"
 import { FiLink } from "react-icons/fi"
+import CopyToClipboard from "./CopyToClipboard"
 
 const SheetContainer = styled.div`
   & h3 {
@@ -108,16 +109,22 @@ export const Sheet = ({ title, items, onlyCode }) => (
               />
             )}
             {code && (
-              <pre className="code">
-                <code>{code}</code>
-              </pre>
+              <>
+                <pre className="code">
+                  <code>{code}</code>
+                </pre>
+                <CopyToClipboard textToCopy={code} />
+              </>
             )}
           </li>
         ))
       ) : (
-        <pre className="code">
-          <code>{onlyCode}</code>
-        </pre>
+        <>
+          <pre className="code">
+            <code>{onlyCode}</code>
+          </pre>
+          <CopyToClipboard textToCopy={code} />
+        </>
       )}
     </ul>
   </SheetContainer>