feat: add copy-to-clipboard functionality to code blocks

src/components/code.scss

@@ -8,7 +8,8 @@
   }
 
   .hljs-keyword,
-  .hljs-built_in {/* stylelint-disable-line */
+  .hljs-built_in {
+    /* stylelint-disable-line */
     color: var(--code-keyword);
   }
 
@@ -20,3 +21,25 @@
     color: var(--code-attribute);
   }
 }
+
+.code-container {
+  position: relative;
+}
+
+.copy-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  padding: 0.5rem;
+  background: transparent;
+  border: none;
+  display: flex;
+  justify-content: center;
+  transition: background-color 0.2s ease;
+  border-radius: 0.25rem;
+
+  &:hover {
+    cursor: pointer;
+  }
+}

src/components/code.tsx

@@ -1,28 +1,51 @@
-import React from 'react';
-import {
-  Light as SyntaxHighlighter,
-} from 'react-syntax-highlighter';
-import './code.scss';
-import bash from 'react-syntax-highlighter/dist/esm/languages/hljs/bash';
+import React, { useState } from "react";
+import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
+import "./code.scss";
+import bash from "react-syntax-highlighter/dist/esm/languages/hljs/bash";
 // eslint-disable-next-line max-len
-import typescript from 'react-syntax-highlighter/dist/esm/languages/hljs/typescript';
+import typescript from "react-syntax-highlighter/dist/esm/languages/hljs/typescript";
 // eslint-disable-next-line max-len
-import markdown from 'react-syntax-highlighter/dist/esm/languages/hljs/markdown';
-
-SyntaxHighlighter.registerLanguage('typescript', typescript,);
-SyntaxHighlighter.registerLanguage('bash', bash,);
-SyntaxHighlighter.registerLanguage('markdown', markdown,);
+import markdown from "react-syntax-highlighter/dist/esm/languages/hljs/markdown";
+import { FaRegCopy } from "react-icons/fa";
+SyntaxHighlighter.registerLanguage("typescript", typescript);
+SyntaxHighlighter.registerLanguage("bash", bash);
+SyntaxHighlighter.registerLanguage("markdown", markdown);
 
 interface CodeType {
-  language: 'bash'|'typescript'|'markdown',
-  children: string|string[],
+  language: "bash" | "typescript" | "markdown";
+  children: string | string[];
 }
 
-const Code = ({
-  language,
-  children,
-}: CodeType,) => <SyntaxHighlighter
-  useInlineStyles={false}
-  language={language}>{children}</SyntaxHighlighter>;
+const Code = ({ language, children }: CodeType) => {
+  const [copy, setCopy] = useState(false);
+
+  const handleCopy = () => {
+    const textToCopy = Array.isArray(children) ? children.join("\n") : children;
+    navigator.clipboard.writeText(textToCopy);
+    setCopy(true);
+    setTimeout(() => setCopy(false), 2000);
+  };
 
+  return (
+    <div className="code-container">
+      <button
+        className="copy-button"
+        onClick={handleCopy}
+        aria-label={copy ? "Copied!" : "Copy code"}
+        type="button"
+      >
+        <FaRegCopy
+          width={25}
+          height={25}
+          style={{
+            color: copy ? "#4CAF50" : "white",
+          }}
+        />
+      </button>
+      <SyntaxHighlighter useInlineStyles={false} language={language}>
+        {children}
+      </SyntaxHighlighter>
+    </div>
+  );
+};
 export default Code;

src/components/header.scss

@@ -76,6 +76,7 @@ header {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     position: fixed;
+    z-index: 1;
     width: 100%;
 
     ul {