new-server/webui/src/App.tsx

import React from 'react';
import {HookRouter, navigate, usePath, useRoutes} from "hookrouter";
import {Tabs} from "./primitives/Layout";
import {HSColorPicker} from "./primitives/Forms";
import {ColorElement} from "./primitives/Elements";

const routeObj: HookRouter.RouteObject = {
  "/": () => (
    <div>
      <HSColorPicker h={30} s={1} onChange={() => void (0)}/>
    </div>
  ),
  "/devices": () => (
    <div>
      <ColorElement name="Grønn" value={{h: 125, s: 0.5}}/>
      <ColorElement name="Kelvin 1k" value={{kelvin: 1000}}/>
      <ColorElement name="Kelvin 2k" value={{kelvin: 2000}}/>
      <ColorElement name="Kelvin 3k" value={{kelvin: 3000}}/>
      <ColorElement name="Kelvin 4k" value={{kelvin: 4000}}/>
      <ColorElement name="Kelvin 5k" value={{kelvin: 5000}}/>
      <ColorElement name="Kelvin 6k" value={{kelvin: 6000}}/>
      <ColorElement name="Kelvin 7k" value={{kelvin: 7000}}/>
      <ColorElement name="Kelvin 8k" value={{kelvin: 8000}}/>
      <ColorElement name="Kelvin 9k" value={{kelvin: 9000}}/>
      <ColorElement name="Kelvin 10k" value={{kelvin: 10000}}/>
      <ColorElement name="Mer... (HS)" value="hs-gradient"/>
      <ColorElement name="Mer... (K)" value="k-gradient"/>
    </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;