add tabbed buttons component

web/src/components/ButtonsTabbed.jsx

@@ -1,26 +1,34 @@
 import { h } from 'preact';
-import { useCallback } from 'preact/hooks';
+import { useCallback, useState } from 'preact/hooks';
 
-export default function ButtonsTabbed({ titles = [], viewMode, setViewMode }) {
-  const className = 'text-gray-600 py-0 px-4 block hover:text-gray-500';
+export default function ButtonsTabbed({
+  viewModes = [''],
+  setViewMode = null,
+  setHeader = null,
+  headers = [''],
+  className = 'text-gray-600 py-0 px-4 block hover:text-gray-500',
+  selectedClassName = `${className} focus:outline-none border-b-2 font-medium border-gray-500`
+}) {
+  const [selected, setSelected] = useState(0);
+  const captitalize = (str) => { return (`${str.charAt(0).toUpperCase()}${str.slice(1)}`); };
+
+  const getHeader = useCallback((i) => {
+    return (headers.length === viewModes.length ? headers[i] : captitalize(viewModes[i]));
+  }, [headers, viewModes]);
 
   const handleClick = useCallback((i) => {
-    setViewMode(titles[i]);
-  }, [viewMode]); // eslint-disable-line react-hooks/exhaustive-deps
+    setSelected(i);
+    setViewMode && setViewMode(viewModes[i]);
+    setHeader && setHeader(getHeader(i));
+  }, [setViewMode, setHeader, setSelected, viewModes, getHeader]);
 
+  setHeader && setHeader(getHeader(selected));
   return (
     <nav className="flex justify-end">
-      {titles.map((title, i) => {
+      {viewModes.map((item, 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 onClick={() => handleClick(i)} className={i === selected ? selectedClassName : className}>
+            {captitalize(item)}
           </button>
         );
       })}

web/src/routes/Camera.jsx

@@ -113,7 +113,7 @@ export default function Camera({ camera }) {
   return (
     <div className="space-y-4">
       <Heading size="2xl">{camera}</Heading>
-      <ButtonsTabbed titles={['live', 'debug']} setViewMode={setViewMode} viewMode={viewMode} />
+      <ButtonsTabbed viewModes={['live', 'debug']} setViewMode={setViewMode} />
 
       {player}