Merge pull request #5 from cenit-io/feat/add_doc_links

Feat/add doc links
cenit-io · Mar 29, 2022 · 06b1e4e · 06b1e4e
2 parents 876671c + 23b0dc6
commit 06b1e4e
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 71 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "billing",
+  "name": "cenit-ui-ref",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -10,15 +10,11 @@
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.8.3",
-    "axios": "^0.21.1",
     "clsx": "^1.1.1",
-    "human-time": "0.0.2",
-    "marked": "^2.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
-    "rxjs": "^6.6.6",
     "web-vitals": "^1.1.1"
   },
   "scripts": {

diff --git a/public/index.html b/public/index.html
@@ -26,7 +26,6 @@
     -->
     <title>React App</title>
     <script src="%PUBLIC_URL%/config.js"></script>
-    <script src="https://js.stripe.com/v3/"></script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -1,13 +1,8 @@
-import React, { useEffect, useState } from 'react';
-import QueryString from 'querystring';
+import React from "react";
 import ErrorBoundary from "./components/ErrorBoundary";
-import { catchError } from "rxjs/operators";
-import { of } from "rxjs";
-import './common/FlexBox.css';
 import { BrowserRouter, Switch, Route } from "react-router-dom";
-import { HOME, PLANS } from "./components/routes";
 import Layout from "./components/Layout";
-import LinearProgress from "@material-ui/core/LinearProgress";
+import './common/FlexBox.css';
 
 function App() {
 

diff --git a/src/common/hooks.js b/src/common/hooks.js
diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -1,29 +1,13 @@
-import IconButton from "@material-ui/core/IconButton";
-import BackIcon from "@material-ui/icons/KeyboardBackspace";
-import React, { useEffect } from "react";
-import { useHistory, useLocation } from "react-router-dom";
+import React from "react";
+import NavBar from './NavBar';
 import { makeStyles } from "@material-ui/core";
-import { HOME } from "./routes";
-// import Plans from "./Plans";
-import { Switch, Route } from "react-router-dom";
 
 const H = 6;
 
 const useStyles = makeStyles(theme => ({
     root: {
         position: 'relative',
         paddingTop: theme.spacing(H)
-    },
-    appBar: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: theme.spacing(H),
-    },
-    container: {
-        height: `calc(100vh - ${theme.spacing(H)}px)`,
-        overflow: 'auto'
     }
 }));
 
@@ -33,18 +17,7 @@ export default function Layout() {
 
     return (
         <div className={classes.root}>
-            <div className={classes.container}>
-                <div className="flex justify-content-center align-items-center relative">
-                    <p>Rereference</p>
-                    <ul>
-                        <li>Docs</li>
-                        <li>Roadmap</li>
-                        <li>Suggest a feature</li>
-                        <li>Report an issue</li>
-                    </ul>
-
-                </div>
-            </div>
+            <NavBar />
         </div>
     );
 }
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
@@ -0,0 +1,49 @@
+import React from "react";
+import { makeStyles, Typography } from "@material-ui/core";
+
+const LINKS = [
+    { label: 'Docs', href: 'https://docs.cenit.io/' },
+    { label: 'Roadmap', href: 'https://cenit.frill.co/roadmap' },
+    { label: 'Suggest a feature', href: 'https://github.com/cenit-io/cenit/issues/new?assignees=&labels=&template=feature_request.md&title=' },
+    { label: 'Report an issue', href: 'https://github.com/cenit-io/cenit/issues/new?assignees=&labels=&template=bug_report.md&title=' }
+];
+
+const H = 6;
+
+const useStyles = makeStyles(theme => ({
+    container: {
+        height: `calc(100vh - ${theme.spacing(H)}px)`,
+        overflow: 'auto'
+    },
+    li: {
+        float: 'left'
+    },
+    a: {
+        display: 'block',
+        padding: '32px',
+        backgroundColor: '#dddddd'
+    }
+}));
+
+const NavItem = ({ item }) => {
+    const classes = useStyles();
+    return (
+        <li className={classes.li}><a className={classes.a} href={item.href}>{item.label}</a></li>
+    );
+};
+
+export default function NavBar() {
+
+    const classes = useStyles();
+
+    return (
+        <div className={classes.container}>
+            <div className="flex column justify-content-center align-items-center relative">
+                <Typography variant="h5">Reference</Typography>
+                <ul style={{ listStyleType: 'none', margin: 0, padding: 0, overflow: 'hidden' }}>
+                    {LINKS.map(i => <NavItem key={i.label} item={i} />)}
+                </ul>
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/routes.js b/src/components/routes.js