feat!: web user interface

web/src/Cameras.jsx

@@ -0,0 +1,36 @@
+import { h } from 'preact';
+import Events from './Events';
+import Heading from './components/Heading';
+import { route } from 'preact-router';
+import { useContext } from 'preact/hooks';
+import { ApiHost, Config } from './context';
+
+export default function Cameras() {
+  const config = useContext(Config);
+
+  if (!config.cameras) {
+    return <p>loading…</p>;
+  }
+
+  return (
+    <div className="grid lg:grid-cols-2 md:grid-cols-1 gap-4">
+      {Object.keys(config.cameras).map((camera) => (
+        <Camera name={camera} />
+      ))}
+    </div>
+  );
+}
+
+function Camera({ name }) {
+  const apiHost = useContext(ApiHost);
+  const href = `/cameras/${name}`;
+
+  return (
+    <div className="bg-white dark:bg-gray-700 shadow-lg rounded-lg p-4  hover:bg-gray-300 hover:dark:bg-gray-500 dark:hover:text-gray-900">
+      <a className="dark:hover:text-gray-900" href={href}>
+        <Heading size="base">{name}</Heading>
+        <img className="w-full" src={`${apiHost}/api/${name}/latest.jpg`} />
+      </a>
+    </div>
+  );
+}