add tabbed buttons component

web/src/components/ButtonsTabbed.jsx

@@ -0,0 +1,29 @@
+import { h } from 'preact';
+import { useCallback } from 'preact/hooks';
+
+export default function ButtonsTabbed({ titles = [], viewMode, setViewMode }) {
+  const className = 'text-gray-600 py-0 px-4 block hover:text-gray-500';
+
+  const handleClick = useCallback((i) => {
+    setViewMode(titles[i]);
+  }, [viewMode]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <nav className="flex justify-end">
+      {titles.map((title, i) => {
+        return (
+          <button
+            autoFocus={!i}
+            onClick={() => handleClick(i)}
+            className={viewMode === title
+              ? `${className} focus:outline-none border-b-2 font-medium border-gray-500`
+              : className
+            }
+          >
+            {`${title.charAt(0).toUpperCase()}${title.slice(1)}`}
+          </button>
+        );
+      })}
+    </nav>
+  );
+}

web/src/routes/Camera.jsx

@@ -7,6 +7,7 @@ import Heading from '../components/Heading';
 import Link from '../components/Link';
 import SettingsIcon from '../icons/Settings';
 import Switch from '../components/Switch';
+import ButtonsTabbed from '../components/ButtonsTabbed';
 import { usePersistence } from '../context';
 import { useCallback, useMemo, useState } from 'preact/hooks';
 import { useApiHost, useConfig } from '../api';
@@ -112,16 +113,7 @@ export default function Camera({ camera }) {
   return (
     <div className="space-y-4">
       <Heading size="2xl">{camera}</Heading>
-      <div>
+      <ButtonsTabbed titles={['live', 'debug']} setViewMode={setViewMode} viewMode={viewMode} />
-        <nav className="flex justify-end">
-          <button onClick={() => setViewMode('live')} className={viewMode === 'live' ? 'text-gray-600 py-0 px-4 block hover:text-gray-500 focus:outline-none border-b-2 font-medium border-gray-500' : 'text-gray-600 py-0 px-4 block hover:text-gray-500'}>
-            Live
-          </button>
-          <button onClick={() => setViewMode('debug')} className={viewMode === 'debug' ? 'text-gray-600 py-0 px-4 block hover:text-gray-500 focus:outline-none border-b-2 font-medium border-gray-500' : 'text-gray-600 py-0 px-4 block hover:text-gray-500'}>
-            Debug
-          </button>
-        </nav>
-      </div>
 
       {player}