Added links to LemonUnit page and project GitHub page

Author: Yurii Tokarskyi

public/lemonunit-logo.png

@@ -6,7 +6,7 @@
 
 .Editor {
   width: 100vw;
-  height: calc(100vh - 64px);
+  height: calc(100vh - 64px - 30px);
   overflow: auto;
 }
 
@@ -43,4 +43,38 @@
 .ConfigBar .ConfigBarWidgetLabel {
   padding-right: 10px;
   color: #777;
+}
+
+.Footer {
+  height: 30px;
+  line-height: 30px;
+  padding: 0 10px;
+  background: #fff;
+  font-size: 13px;
+  border-top: 1px solid #e8e8e8;
+}
+
+.GitHubIcon {
+  color: #ccc;
+  font-size: 20px;
+}
+
+.GitHubIcon:hover {
+  color: #333;
+}
+
+.LemonUnitIcon {
+  position: relative;
+}
+
+.LemonUnitIcon img {
+  top: -1px;
+  position: relative;
+  height: 24px;
+  opacity: 0.4;
+  transition: opacity 0.4s ease-out;
+}
+
+.LemonUnitIcon:hover img {
+  opacity: 1;
 }

src/App.css

@@ -1,6 +1,8 @@
 import React, { Component } from "react";
 
 import { Navigation } from "./components/Navigation";
+import { Footer } from "./components/Footer";
+
 import { SourceItems } from "./editors/types";
 import { CSVEditor } from "./editors/CSVEditor";
 import { JSONEditor } from "./editors/JSONEditor";
@@ -55,6 +57,7 @@ export class App extends Component<AppProps, AppState> {
             source={this.state.source}
           />
         </main>
+        <Footer />
       </div>
     )
   }

src/App.tsx

@@ -0,0 +1,51 @@
+import React, { Component } from "react";
+import { Icon, Row, Col } from "antd";
+
+interface Props { }
+interface State { }
+
+export const FOOTER_HEIGHT = 30;
+
+export class Footer extends Component<Props, State> {
+  renderGithubLink = () => {
+    return (
+      <a
+        href="https://github.com/LemonUnit/csv-editor-online"
+        target="_blank"
+        className="GitHubIcon"
+        title="Go to CSV Editor Online page on GitHub"
+      >
+        <Icon type="github" />
+      </a>
+
+    );
+  }
+
+  renderLemonUnitLink = () => {
+    return (
+      <a
+        href="https://lemonunit.com/"
+        target="_blank"
+        className="LemonUnitIcon"
+        title="Go to LemonUnit home page"
+      >
+        <img src="lemonunit-logo.png" alt="LemonUnit logo" />
+      </a>
+    );
+  }
+
+  render() {
+    return (
+      <footer className="Footer">
+        <Row>
+          <Col span={12}>
+            {this.renderLemonUnitLink()}
+          </Col>
+          <Col span={12} style={{ textAlign: 'right' }}>
+            {this.renderGithubLink()}
+          </Col>
+        </Row>
+      </footer>
+    )
+  }
+}

src/components/Footer.tsx

@@ -11,6 +11,7 @@ import "brace/mode/json";
 
 import { EditorProps } from "./types";
 import { NAVIGATION_HEIGHT, CONFIG_BAR_HEIGHT } from "../components/Navigation";
+import { FOOTER_HEIGHT } from "../components/Footer";
 
 enum CSVDelimiter {
   SEMICOLON = ";",
@@ -54,7 +55,7 @@ export class CSVEditor extends Component<Props, State> {
   }
 
   updateEditorHeight = () => this.setState({
-    editorHeight: window.innerHeight - NAVIGATION_HEIGHT - CONFIG_BAR_HEIGHT
+    editorHeight: window.innerHeight - NAVIGATION_HEIGHT - FOOTER_HEIGHT - CONFIG_BAR_HEIGHT
   })
 
   parseSourceItemsToCsv = () => this.setState({

src/editors/CSVEditor.tsx

@@ -7,6 +7,7 @@ import "brace/mode/json";
 
 import { EditorProps } from "./types";
 import { NAVIGATION_HEIGHT } from "../components/Navigation";
+import { FOOTER_HEIGHT } from "../components/Footer";
 
 interface Props extends EditorProps { }
 
@@ -37,7 +38,7 @@ export class JSONEditor extends Component<Props, State> {
   }
 
   updateEditorHeight = () => this.setState({
-    editorHeight: window.innerHeight - NAVIGATION_HEIGHT
+    editorHeight: window.innerHeight - FOOTER_HEIGHT - NAVIGATION_HEIGHT
   })
 
   parseSourceItemsToJson = () => this.setState({