copy button added

src/sections/Projects/Sistent/components/button/code-block.js

@@ -1,18 +1,57 @@
 import React, { useState } from "react";
-import Code from "../../../../../components/CodeBlock";
+import { ReactComponent as Logo } from "../../../../../assets/images/sistent/copy-logo.svg";
+import styled from "styled-components";
+
+const CopyButtonContainer = styled.div`
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: 0rem;
+    right: 1rem;
+    border: none;
+    cursor: pointer;
+  `;
+
 export const CodeBlock = ({ name, code }) => {
+
   const [showCode, setShowCode] = useState(false);
+  const [isCopied , setIsCopied] = useState(false);
+
   const onChange = () => {
     setShowCode((prev) => !prev);
   };
+
+  const handleCopy = () => {
+
+    if (!navigator.clipboard) {
+      console.error("Clipboard API not supported");
+      return;
+    }
+
+    navigator.clipboard.writeText(code)
+      .then(() => {
+        setIsCopied(true);
+        setTimeout(() => {
+          setIsCopied(false);
+        },1600);
+      });
+  };
+
   return (
-    <div className="show-code">
+    <div className="show-code" >
       <input type="checkbox" name={name} id={name} onChange={onChange} />
       <label htmlFor={name} className="label">
         Show Code
       </label>
-       {showCode && (
-        <Code codeString={code} language="javascript" />
+      {showCode && (
+        <div className="code-container" style ={{ position: "relative" }} >
+          <pre className="code">
+            <code lang="javascript">{code}</code>
+          </pre>
+          <CopyButtonContainer onClick={handleCopy} >
+            {!isCopied ? (<Logo  />) : "Copied!" }
+          </CopyButtonContainer>
+        </div>
       )}
     </div>
   );