tabguhwuh

webui/src/components/RightPaneTabs.jsx

@@ -1,24 +1,10 @@
-import { useState } from 'react';
 import TelemetryPanel from './TelemetryPanel.jsx';
 import DrivePanel from './DrivePanel.jsx';
 import CameraServoPanel from './CameraServoPanel.jsx';
 import RoomCameraPanel from './RoomCameraPanel.jsx';
 import AdvancedSettings from './AdvancedSettings.jsx';
 import HelpPanel from './HelpPanel.jsx';
-
-function TabButton({ active, onClick, children }) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={`flex-1 rounded-sm px-1 py-1 text-xs font-semibold ${
-        active ? 'bg-slate-100 text-slate-900' : 'bg-black/30 text-slate-300'
-      }`}
-    >
-      {children}
-    </button>
-  );
-}
+import Tabs, { Tab, TabList, TabPanel, TabPanels } from './Tabs.jsx';
 
 function RoomControlsPlaceholder() {
   return (
@@ -30,41 +16,37 @@ function RoomControlsPlaceholder() {
 }
 
 export default function RightPaneTabs({ layout }) {
-  const [active, setActive] = useState('telemetry');
-
   return (
     <section className="rounded-sm bg-[#1a1d23] p-1 text-base text-slate-100">
-      <div className="flex gap-1">
-        <TabButton active={active === 'telemetry'} onClick={() => setActive('telemetry')}>
-          Rover Controls
-        </TabButton>
-        <TabButton active={active === 'room'} onClick={() => setActive('room')}>
-          Room Controls
-        </TabButton>
-        <TabButton active={active === 'advanced'} onClick={() => setActive('advanced')}>
-          Settings
-        </TabButton>
-        <TabButton active={active === 'help'} onClick={() => setActive('help')}>
-          Help
-        </TabButton>
-      </div>
-      <div className="mt-1 space-y-1">
-        {active === 'telemetry' && (
-          <div className="space-y-1">
-            <DrivePanel />
-            <CameraServoPanel />
-            <TelemetryPanel />
-          </div>
-        )}
-        {active === 'room' && (
-          <div className="space-y-1">
-            <RoomCameraPanel />
-            <RoomControlsPlaceholder />
-          </div>
-        )}
-        {active === 'advanced' && <AdvancedSettings />}
-        {active === 'help' && <HelpPanel layout={layout} />}
-      </div>
+      <Tabs defaultTab="telemetry">
+        <TabList>
+          <Tab id="telemetry">Rover Controls</Tab>
+          <Tab id="room">Room Controls</Tab>
+          <Tab id="settings">Settings</Tab>
+          <Tab id="help">Help</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel id="telemetry">
+            <div className="space-y-1">
+              <DrivePanel />
+              <CameraServoPanel />
+              <TelemetryPanel />
+            </div>
+          </TabPanel>
+          <TabPanel id="room">
+            <div className="space-y-1">
+              <RoomCameraPanel />
+              <RoomControlsPlaceholder />
+            </div>
+          </TabPanel>
+          <TabPanel id="settings">
+            <AdvancedSettings />
+          </TabPanel>
+          <TabPanel id="help">
+            <HelpPanel layout={layout} />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
     </section>
   );
 }