Add Editor and Routing functionality

frontend/package.json

@@ -7,9 +7,16 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "node-sass": "^4.14.1",
+    "prismjs": "^1.20.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
+<<<<<<< HEAD
     "react-scripts": "3.4.1"
+=======
+    "react-scripts": "3.4.1",
+    "react-simple-code-editor": "^0.11.0"
+>>>>>>> 31497acd3560d4c8ffd23f8e0ffa052b575d0af5
   },
   "scripts": {
     "start": "react-scripts start",

frontend/src/App.js

@@ -1,13 +1,20 @@
 import React from 'react';
 import { Header } from './components/layouts/Header'
+import Editor from './components/PackageGeneration/Editor'
+import { BrowserRouter as Router, Route } from "react-router-dom"
+
+
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-      <Header />
-      </header>
-    </div>
+    <Router>
+      <div className="App">
+        <header className="App-header">
+        <Header />
+        <Route path="/generatePackage"><Editor /></Route>
+        </header>
+      </div>
+    </Router>
   );
 }
 

frontend/src/components/PackageGeneration/Editor.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import Editor from 'react-simple-code-editor';
+import { highlight, languages } from 'prismjs/components/prism-core';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-javascript';
+import './Editor.scss'
+
+const code = `a {
+    margin:10px;
+}`;
+
+class editor extends React.Component {
+
+   state = { code };
+   render() {return(
+       <div className="Container">
+        <Editor className="Editor"
+        value={this.state.code}
+        onValueChange={code => this.setState({ code })}
+        highlight={code => highlight(code, languages.js)}
+        padding={10}
+        style={{
+          fontFamily: '"Fira code", "Fira Mono", monospace',
+          fontSize: 20,
+        }}
+      />
+      </div>
+    )
+   }
+}
+
+export default editor;

frontend/src/components/PackageGeneration/Editor.scss

@@ -0,0 +1,162 @@
+
+
+.Container {
+    padding: 10px;
+    border-radius: 10px;
+}
+ .Editor {
+    padding: 20px;
+    width: 50%;
+    border-radius: 5px;
+}
+
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #a9b7c6;
+	font-family: Consolas, Monaco, 'Andale Mono', monospace;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	color: inherit;
+	background: rgba(33, 66, 131, .85);
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	color: inherit;
+	background: rgba(33, 66, 131, .85);
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #2b2b2b;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.cdata {
+	color: #808080;
+}
+
+.token.delimiter,
+.token.boolean,
+.token.keyword,
+.token.selector,
+.token.important,
+.token.atrule {
+	color: #cc7832;
+}
+
+.token.operator,
+.token.punctuation,
+.token.attr-name {
+	color: #a9b7c6;
+}
+
+.token.tag,
+.token.tag .punctuation,
+.token.doctype,
+.token.builtin {
+	color: #e8bf6a;
+}
+
+.token.entity,
+.token.number,
+.token.symbol {
+	color: #6897bb;
+}
+
+.token.property,
+.token.constant,
+.token.variable {
+	color: #9876aa;
+}
+
+.token.string,
+.token.char {
+	color: #6a8759;
+}
+
+.token.attr-value,
+.token.attr-value .punctuation {
+	color: #a5c261;
+}
+
+.token.attr-value .punctuation:first-child {
+	color: #a9b7c6;
+}
+
+.token.url {
+	color: #287bde;
+	text-decoration: underline;
+}
+
+.token.function {
+	color: #ffc66d;
+}
+
+.token.regex {
+	background: #364135;
+}
+
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.inserted {
+	background: #294436;
+}
+
+.token.deleted {
+	background: #484a4a;
+}
+
+code.language-css .token.property,
+code.language-css .token.property + .token.punctuation {
+	color: #a9b7c6;
+}
+
+code.language-css .token.id {
+	color: #ffc66d;
+}
+
+code.language-css .token.selector > .token.class,
+code.language-css .token.selector > .token.attribute,
+code.language-css .token.selector > .token.pseudo-class,
+code.language-css .token.selector > .token.pseudo-element {
+	color: #ffc66d;
+}