From 4449bc52929791e75fb782b694e5b891652aa589 Mon Sep 17 00:00:00 2001
From: ElMoribond <elmoribond@gmail.com>
Date: Wed, 14 Jul 2021 15:32:19 +0200
Subject: [PATCH] add tabbed buttons component

---
 web/src/components/ButtonsTabbed.jsx | 29 ++++++++++++++++++++++++++++
 web/src/routes/Camera.jsx            | 12 ++----------
 2 files changed, 31 insertions(+), 10 deletions(-)
 create mode 100644 web/src/components/ButtonsTabbed.jsx

diff --git a/web/src/components/ButtonsTabbed.jsx b/web/src/components/ButtonsTabbed.jsx
new file mode 100644
index 000000000..2a42155e5
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/web/src/routes/Camera.jsx b/web/src/routes/Camera.jsx
index 7f5527df4..133841500 100644
--- a/web/src/routes/Camera.jsx
+++ b/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>
-        <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>
+      <ButtonsTabbed titles={['live', 'debug']} setViewMode={setViewMode} viewMode={viewMode} />
 
       {player}