Updated Terminal.tsx and Terminal.scss

Added a copy button for code snippets.

package.json

@@ -22,6 +22,7 @@
     "prettier": "^2.8.7",
     "react": "^18.2.0",
     "react-confetti-explosion": "^2.1.2",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.12.0",
     "react-syntax-highlighter": "^15.5.0",
@@ -32,6 +33,7 @@
     "@babel/preset-env": "^7.22.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.22.11",
+    "@types/react-copy-to-clipboard": "^5.0.5",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.32.0",
     "babel-loader": "^9.1.2",
@@ -51,6 +53,7 @@
     "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.1",
     "mini-css-extract-plugin": "^2.6.1",
+    "react-icons": "^4.11.0",
     "sass": "^1.51.0",
     "sass-loader": "^13.3.1",
     "style-loader": "^3.3.3",

src/components/Terminal.tsx

@@ -1,3 +1,5 @@
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { FaRegCopy } from 'react-icons/fa';
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import cpp from 'react-syntax-highlighter/dist/esm/languages/hljs/cpp';
 import atomOneLightCustom from '../styles/Terminal/atom-one-light-custom';
@@ -12,6 +14,10 @@ SyntaxHighlighter.registerLanguage('cpp', cpp);
 export default function Terminal(props: TerminalProps): JSX.Element {
   return (
     <div className="terminal">
+      <CopyToClipboard text={props.code}>
+        <FaRegCopy className="copybutton" />
+      </CopyToClipboard>
+
       <SyntaxHighlighter
         language="cpp"
         style={atomOneLightCustom} // this error doesn't affect the custom theme, will fix later

src/styles/Terminal/Terminal.scss

@@ -1,5 +1,16 @@
 .terminal {
   justify-content: center;
   margin: auto;
+  position: relative;
   width: 80%;
 }
+
+.copybutton {
+  position: absolute;
+  right: 14px;
+  top: 14px;
+
+  &:hover {
+    color: blue;
+  }
+}