my shit

webui/package.json

@@ -1,43 +1,48 @@
-{
-  "name": "webui",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
-    "typescript": "^4.1.2",
-    "web-vitals": "^1.0.1"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
+{
+  "name": "webui",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "@types/jest": "^26.0.15",
+    "@types/node": "^12.0.0",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "hookrouter": "^1.2.5",
+    "node-sass": "4.14.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3",
+    "typescript": "^4.1.2",
+    "web-vitals": "^1.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/hookrouter": "^2.2.5"
+  }
+}

webui/src/App.tsx

@@ -1,26 +1,31 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;
+import React from 'react';
+import {HookRouter, navigate, usePath, useRoutes} from "hookrouter";
+import {Tabs} from "./primitives/Layout";
+
+const routeObj: HookRouter.RouteObject = {
+  "/": () => <div>1</div>,
+  "/devices": () => <div>2</div>,
+  "/settings": () => <div>3</div>,
+}
+
+const routeList = ["/", "/devices", "/settings"];
+
+const tabNames = ["Lucifer", "Enheter", "Oppsett"];
+
+function App() {
+  const route = useRoutes(routeObj);
+  const path = usePath();
+
+  return (
+    <div className="App">
+      <Tabs tabNames={tabNames}
+            index={routeList.indexOf(path)}
+            onChange={i => navigate(routeList[i])}
+            boldIndex={0}
+      />
+      {route || <div>B</div>}
+    </div>
+  );
+}
+
+export default App;

webui/src/index.css

@@ -1,13 +1,7 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+body, html {
+  margin: 0;
+  font-family: sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  padding: 0;
+}

webui/src/index.tsx

@@ -1,17 +1,17 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import reportWebVitals from "./reportWebVitals";
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

webui/src/primitives/Layout.sass

@@ -0,0 +1,17 @@
+@import "../res/colors"
+
+.Tabs-container
+  background-color: $color-foreground-dark
+
+  .Tabs-element
+    display: inline-block
+    padding: 0.25em 0.7ch
+    cursor: pointer
+    user-select: none
+
+  .Tabs-active
+    border-bottom: 1px solid $color-foreground
+
+  .Tabs-bold
+    font-family: 'Bitstream Vera Serif', 'Lucida Fax', serif
+    font-weight: 600

webui/src/primitives/Layout.tsx

@@ -0,0 +1,45 @@
+import React, {useCallback, useEffect, useMemo} from "react";
+import "./Layout.sass";
+
+interface TabsProps {
+  tabNames: string[]
+  index: number
+  onChange: (newIndex: number) => void
+  boldIndex?: number
+}
+
+export function Tabs({tabNames, index, onChange, boldIndex}: TabsProps) {
+  useEffect(() => {
+    if (index < 0) {
+      onChange(0);
+    } else if (tabNames.length > 0 && index >= tabNames.length) {
+      onChange(tabNames.length - 1);
+    }
+  }, [tabNames, index, onChange]);
+
+  const tabClass = useCallback((i: number) => {
+    const classes = ['Tabs-element'];
+
+    if (i === index) {
+      classes.push("Tabs-active");
+    }
+
+    if (i === boldIndex) {
+      classes.push("Tabs-bold");
+    }
+
+    return classes.join(" ");
+  }, [index, boldIndex])
+
+  return (
+    <div className="Tabs-container">
+      {tabNames.map((name, i) => (
+        <div className={tabClass(i)}
+             onClick={() => onChange(i)}
+        >
+          {name}
+        </div>
+      ))}
+    </div>
+  );
+}

webui/src/res/colors.sass

@@ -0,0 +1,7 @@
+$color-background: #111
+$color-foreground: rgb(238, 238, 238)
+$color-foreground-dark: rgba(238, 238, 238, 0.05)
+
+body, html
+  background-color: $color-background
+  color: $color-foreground