feat!: web user interface

web/src/App.jsx

@@ -0,0 +1,43 @@
+import { h } from 'preact';
+import Camera from './Camera';
+import CameraMap from './CameraMap';
+import Cameras from './Cameras';
+import Debug from './Debug';
+import Event from './Event';
+import Events from './Events';
+import { Router } from 'preact-router';
+import Sidebar from './Sidebar';
+import { ApiHost, Config } from './context';
+import { useContext, useEffect, useState } from 'preact/hooks';
+
+export default function App() {
+  const apiHost = useContext(ApiHost);
+  const [config, setConfig] = useState(null);
+
+  useEffect(async () => {
+    const response = await fetch(`${apiHost}/api/config`);
+    const data = response.ok ? await response.json() : {};
+    setConfig(data);
+  }, []);
+
+  return !config ? (
+    <div />
+  ) : (
+    <Config.Provider value={config}>
+      <div className="md:flex flex-col md:flex-row md:min-h-screen w-full bg-gray-100 dark:bg-gray-800 ">
+        <Sidebar />
+        <div className="p-4">
+          <Router>
+            <CameraMap path="/cameras/:camera/map-editor" />
+            <Camera path="/cameras/:camera" />
+            <Event path="/events/:eventId" />
+            <Events path="/events" />
+            <Debug path="/debug" />
+            <Cameras path="/" />
+          </Router>
+        </div>
+      </div>
+    </Config.Provider>
+  );
+  return;
+}