[Feature]: Added Copy Code Button (Web)

components/codePreview/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useCallback, useRef, useState } from "react";
 import "highlight.js/styles/atom-one-light.css";
 import { Algorithm } from "lib/models";
 import {
@@ -28,6 +28,7 @@ import {
   OpenInNew,
   PlayArrow,
 } from "@material-ui/icons";
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import NextLink from "next/link";
 import { StringParam, useQueryParam, withDefault } from "next-query-params";
 import classes from "./style.module.css";
@@ -45,6 +46,11 @@ export default function CodePreview({ algorithm }: { algorithm: Algorithm }) {
   const fabRef = useRef();
   const [mobileMoreMenuOpen, setMobileMoreMenuOpen] = useState(false);
 
+  const copyCode = useCallback(async () => {
+    const codeText = document.querySelector(".style_pre__k555n")?.textContent;
+    await navigator.clipboard.writeText(codeText);
+  },[])
+
   return (
     <div className={`${classes.container}`}>
       <div className={classes.codeBox}>
@@ -92,6 +98,10 @@ export default function CodePreview({ algorithm }: { algorithm: Algorithm }) {
         ) : (
           <>
             <div className={classes.buttonsTop}>
+              <IconButton className={classes.copycode} onClick={copyCode}>
+                <ContentCopyIcon/>
+              </IconButton>
+
               <Button
                 startIcon={<OpenInNew />}
                 href={implementations[selectedLanguague].url}

components/codePreview/style.module.css

@@ -56,6 +56,10 @@
   justify-content: flex-end;
 }
 
+.copycode {
+  margin-right: 5px;
+}
+
 .fullscreen {
   margin: 0 10px !important;
 }

package.json

@@ -18,11 +18,15 @@
     "lint-fix": "eslint ./ --fix"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
     "@material-ui/styles": "^4.11.5",
     "@monaco-editor/react": "^4.4.5",
+    "@mui/icons-material": "^5.14.11",
+    "@mui/material": "^5.14.11",
     "@octokit/core": "^3.6.0",
     "ansi_up": "^5.1.0",
     "atob": "^2.1.2",

public/locales/en/categories.json

@@ -37,6 +37,7 @@
     "complementaryfilter": "Complementary Filter",
     "compression": "Compression",
     "computervision": "Computer Vision",
+    "concurrency": "Concurrency",
     "conversions": "Conversions",
     "cosinesimilarity": "Cosine Similarity",
     "cpuschedulingalgorithms": "CPU Scheduling Algorithms",
@@ -53,6 +54,7 @@
     "digitalimageprocessing": "Digital Image Processing",
     "discretemathematics": "Discrete Mathematics",
     "disjointset": "Disjoint Set",
+    "disjointsetunion": "Disjointsetunion",
     "distance": "Distance",
     "distances": "Distances",
     "dithering": "Dithering",
@@ -97,12 +99,15 @@
     "heap": "Heap",
     "heaps": "Heaps",
     "histogramequalization": "Histogram Equalization",
+    "http": "Http",
     "imageprocessing": "Image Processing",
+    "io": "Io",
     "ipynbcheckpoints": ".Ipynb Checkpoints",
     "knapsack": "Knapsack",
     "leetcode": "Leetcode",
     "levenshtein": "Levenshtein",
     "linearalgebra": "Linear Algebra",
+    "linearprogramming": "Linear Programming",
     "linearregression": "Linear Regression",
     "linkedlist": "Linked List",
     "list": "List",
@@ -112,6 +117,7 @@
     "lstm": "Lstm",
     "machinelearning": "Machine Learning",
     "manacher": "Manacher",
+    "map": "Map",
     "math": "Math",
     "matrix": "Matrix",
     "matrixexponentiation": "Matrix Exponentiation",
@@ -149,6 +155,7 @@
     "password": "Password",
     "patternsearch": "Pattern Search",
     "permutation": "Permutation",
+    "permutations": "Permutations",
     "physics": "Physics",
     "pi": "PI",
     "piecewise": "Piecewise",
@@ -178,6 +185,7 @@
     "segmenttrees": "Segment Trees",
     "sequences": "Sequences",
     "series": "Series",
+    "set": "Set",
     "shufflers": "Shufflers",
     "sieveoferatosthenes": "Sieve of Eratosthenes",
     "slidingwindow": "Sliding Window",
@@ -186,6 +194,7 @@
     "sources": "Sources",
     "spanningtree": "Spanning Tree",
     "specializedstructure": "Specialized Structure",
+    "sqrt": "Sqrt",
     "stablemarriage": "Stable Marriage",
     "stacks": "Stacks",
     "stackwithsinglylinkedlist": "Stack with Singly Linked List",
@@ -197,13 +206,16 @@
     "test": "Test",
     "tests": "Tests",
     "textclassification": "Text Classification",
+    "threads": "Threads",
     "timingfunctions": "Timing-Functions",
+    "tls": "Tls",
     "tree": "Tree",
     "trie": "Trie",
     "tries": "Tries",
     "uint53": "Uint 53",
     "utils": "Utils",
     "vectors": "Vectors",
     "view": "View",
+    "web": "Web",
     "webprogramming": "Web Programming"
 }