UI Enhancement for code reference instant app

apps/code-reference/src/App.jsx

@@ -1,23 +1,39 @@
-import React from "react";
+import React, { useState } from "react";
 import SyntaxHighlighter from "react-syntax-highlighter";
-import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import { atomOneLight } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import axios from "axios";
 import styled from "styled-components";
 import _ from "lodash";
+import * as Icon from "react-feather";
 
 //------------Styled Components-------------
 // If you're unfamiliar with styled components
 // start here https://styled-components.com/docs/basics#getting-started
 const Source = styled.span`
   font-size: 1rem;
+  font-style: italic;
+  font-weight: 400;
+  color: #878787;
+`;
+
+const SourceLink = styled.a`
+  text-decoration: none;
+  color: #878787;
+  margin-left: 4px;
+  font-weight: 700;
 `;
 
 const CodeBlock = styled.div`
   height: 60vh;
   width: clamp(300px, 60vw, 900px);
   overflow-y: auto;
   font-size: 1rem;
-`
+`;
+const CodeBlockWrapper = styled.div`
+  height: 68vh;
+  background: #fafafa;
+  width: clamp(300px, 60vw, 900px);
+`;
 
 const Container = styled.div`
   display: flex;
@@ -27,38 +43,60 @@ const Container = styled.div`
 `;
 
 const Clipboard = styled.button`
-  margin: 0;
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin: 1.1rem;
+  outline: 0;
+  cursor: pointer;
+  float: right;
 `;
 
 //=========================================
 
 // Your UI logic goes here.
 // `data` prop is exactly what is returned by queryToData.
+
 function Component(props) {
-  console.log(props.data.language, props.data.code);
+  console.log(props.data);
+  const [isCopied, setIsCopied] = useState(false);
+  const handleCopy = (clip) => {
+    clip.writeText(props.data.algorithm).then(() => {
+      setIsCopied(true);
+      setTimeout(() => {
+        setIsCopied(false);
+      }, 2000);
+    });
+  };
   return (
     <div>
-      <p>{_.startCase(props.data.algorithm)}</p>
-      <CodeBlock>
-        <SyntaxHighlighter 
-          language={props.data.language} 
-          style={a11yDark}
-          wrapLongLines={true}
-        >
-          {JSON.parse(props.data.code)}
-        </SyntaxHighlighter>
-      </CodeBlock>
+      <b>{_.startCase(`${props.data.algorithm} in ${props.data.language}`)}</b>
+      <CodeBlockWrapper>
+        <CodeBlock>
+          <SyntaxHighlighter
+            language={props.data.language}
+            style={atomOneLight}
+            wrapLongLines={true}
+            customStyle={{
+              background: "#FAFAFA",
+            }}
+          >
+            {JSON.parse(props.data.code)}
+          </SyntaxHighlighter>
+        </CodeBlock>
+        <Clipboard onClick={() => handleCopy(navigator.clipboard)}>
+          {!isCopied ? (
+            <Icon.Copy size={26} color="#AFAFAF" />
+          ) : (
+            <Icon.Check size={26} color="#AFAFAF" />
+          )}
+        </Clipboard>
+      </CodeBlockWrapper>
       <Container>
         <Source>
-          Source : <a href={props.data.source}>{props.data.name}</a>
+          Source :
+          <SourceLink href={props.data.source}>{props.data.name}</SourceLink>
         </Source>
-        <Clipboard
-          onClick={() => {
-            navigator.clipboard.writeText(JSON.parse(props.data.code));
-          }}
-        >
-          Copy to Clipboard
-        </Clipboard>
       </Container>
     </div>
   );
@@ -73,12 +111,12 @@ const queryToData = async ({ query }) => {
   //  -> Language - Mostly Single Word
   const languageMap = {
     js: "javascript",
-    cpp: "c++"
-  }
+    cpp: "c++",
+  };
   query = query.toLowerCase();
-  Object.keys(languageMap).forEach(shortForm => {
+  Object.keys(languageMap).forEach((shortForm) => {
     query = query.replace(shortForm, languageMap[shortForm]);
-  })
+  });
   const searchQuery = query;
   const value = await axios.get(
     "https://felvin-service.herokuapp.com/api/code",

package.json

@@ -36,5 +36,8 @@
   },
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown"
+  },
+  "dependencies": {
+    "react-syntax-highlighter": "^15.5.0"
   }
 }

yarn.lock

@@ -13233,13 +13233,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prismjs@npm:^1.27.0":
+  version: 1.28.0
+  resolution: "prismjs@npm:1.28.0"
+  checksum: bde93fb2beb45b7243219fc53855f59ee54b3fa179f315e8f9d66244d756ef984462e10561bbdc6713d3d7e051852472d7c284f5794a8791eeaefea2fb910b16
+  languageName: node
+  linkType: hard
+
 "prismjs@npm:~1.25.0":
   version: 1.25.0
   resolution: "prismjs@npm:1.25.0"
   checksum: 04d8eae9d1b26b76c350bc65621584c8f8cab80ace7da3953f8aef2f9a8dd4b4f71c1d15bc5c67f126ddc90cd5af613919dc1340589a6c57355bed86fa3ac010
   languageName: node
   linkType: hard
 
+"prismjs@npm:~1.27.0":
+  version: 1.27.0
+  resolution: "prismjs@npm:1.27.0"
+  checksum: 85c7f4a3e999073502cc9e1882af01e3709706369ec254b60bff1149eda701f40d02512acab956012dc7e61cfd61743a3a34c1bd0737e8dbacd79141e5698bbc
+  languageName: node
+  linkType: hard
+
 "private-mono-repo@workspace:.":
   version: 0.0.0-use.local
   resolution: "private-mono-repo@workspace:."
@@ -13255,6 +13269,7 @@ __metadata:
     lint-staged: ^11.1.2
     msw: ^0.35.0
     prettier: 2.4.0
+    react-syntax-highlighter: ^15.5.0
     ts-jest: ^27.0.5
     typescript: ^4.4.3
   languageName: unknown
@@ -13838,6 +13853,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-syntax-highlighter@npm:^15.5.0":
+  version: 15.5.0
+  resolution: "react-syntax-highlighter@npm:15.5.0"
+  dependencies:
+    "@babel/runtime": ^7.3.1
+    highlight.js: ^10.4.1
+    lowlight: ^1.17.0
+    prismjs: ^1.27.0
+    refractor: ^3.6.0
+  peerDependencies:
+    react: ">= 0.14.0"
+  checksum: c082b48f30f8ba8d0c55ed1d761910630860077c7ff5793c4c912adcb5760df06436ed0ad62be0de28113aac9ad2af55eccd995f8eee98df53382e4ced2072fb
+  languageName: node
+  linkType: hard
+
 "react-tetris@npm:^0.1.2":
   version: 0.1.2
   resolution: "react-tetris@npm:0.1.2"
@@ -13971,6 +14001,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"refractor@npm:^3.6.0":
+  version: 3.6.0
+  resolution: "refractor@npm:3.6.0"
+  dependencies:
+    hastscript: ^6.0.0
+    parse-entities: ^2.0.0
+    prismjs: ~1.27.0
+  checksum: 39b01c4168c77c5c8486f9bf8907bbb05f257f15026057ba5728535815a2d90eed620468a4bfbb2b8ceefbb3ce3931a1be8b17152dbdbc8b0eef92450ff750a2
+  languageName: node
+  linkType: hard
+
 "regenerate-unicode-properties@npm:^10.0.1":
   version: 10.0.1
   resolution: "regenerate-unicode-properties@npm:10.0.1"