Merge pull request #7 from criar-art/highlight

Highlight

package.json

@@ -40,6 +40,7 @@
   },
   "dependencies": {
     "darkmode-react-component": "^0.1.7",
+    "highlight.js": "^11.10.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-techs-logos": "^0.1.14"

src/components/Code/index.tsx

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from 'react';
+import hljs from 'highlight.js';
+import 'highlight.js/scss/atom-one-light.scss';
+
+function ModalInstall(props: any) {
+  const codeRef: any = useRef(null);
+
+  useEffect(() => {
+    hljs.highlightElement(codeRef.current);
+  }, [props.children]);
+
+  return (
+    <code ref={codeRef} className={`language-${props.language}`}>{props.children}</code>
+  );
+}
+
+export default ModalInstall;

src/components/Code/style.scss

@@ -0,0 +1,59 @@
+.modal {
+  background: var(--vtl-background);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 11;
+  backdrop-filter: blur(20px);
+  opacity: 0;
+  pointer-events: none;
+  transition: .5s all;
+  &.active {
+    opacity: 1;
+    pointer-events: all;
+  }
+}
+
+.modal-content {
+  background: var(--vtl-background);
+  overflow: auto;
+  border-radius: 20px;
+  margin: 3rem;
+  padding: 2rem;
+  height: calc(100% - 10rem);
+  h2:first-of-type {
+    margin-top: 0;
+  }
+  code:last-of-type {
+    margin-bottom: 0;
+  }
+  code {
+    background: #fff;
+    color: #000;
+  }
+}
+
+.darkmode {
+  .modal-content code {
+    background: #000;
+    color: #fff;
+  }
+}
+
+.modal-button {
+  position: absolute;
+  top: 2.5rem;
+  right: 2.5rem;
+  z-index: 11;
+  cursor: pointer;
+  background-color: #fff;
+  border: 0;
+  border-radius: 100px;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: scale(2);
+}

src/components/ModalInstall/index.tsx

@@ -1,3 +1,4 @@
+import Code from '../Code';
 import "./style.scss";
 
 function ModalInstall(props: any) {
@@ -19,21 +20,21 @@ function ModalInstall(props: any) {
       </button>
       <div className="modal-content">
         <h2>Install</h2>
-        <code>npm install --save react-techs-logos</code>
+        <Code language="shell">npm install --save react-techs-logos</Code>
         <h2>Usage</h2>
-        <code>import ReactTechsLogs from 'react-techs-logos'</code>
-        <br />
-        <code>{`<ReactTechsLogos name="facebook" />`}</code>
-        <h2 className="title">Hidden Label</h2>
-        <code>{`<ReactTechsLogos name="facebook" hiddenLabel />`}</code>
-        <h2 className="title">List of techs filtered</h2>
-        <code>
+        <Code language="jsx">{`import ReactTechsLogs from 'react-techs-logos'
+
+<ReactTechsLogos name="facebook" />`}</Code>
+        <h2 className="title">hiddenLabel</h2>
+        <Code language="jsx">{`<ReactTechsLogos name="facebook" hiddenLabel />`}</Code>
+        <h2 className="title">List</h2>
+        <Code language="jsx">
           {`<ReactTechsLogos list={['vue', 'react', 'angular', 'ember']} />`}
-        </code>
-        <h2 className="title">List of techs hiddenLogos</h2>
-        <code>
+        </Code>
+        <h2 className="title">hiddenLogos</h2>
+        <Code language="jsx">
           {`<ReactTechsLogos hiddenLogos={['android', 'apple', 'vue', 'react', 'angular', 'ember']} />`}
-        </code>
+        </Code>
       </div>
     </div>
   );

src/components/ModalInstall/style.scss

@@ -30,8 +30,10 @@
     margin-bottom: 0;
   }
   code {
+    padding: 1rem;
     background: #fff;
     color: #000;
+    white-space: pre;
   }
 }