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>
+  );
+}