redoe

2026-09-16 17:40:46 -04:00 · 2025-11-16 04:01:33 -05:00
parent 750c6401d2
commit 9b80c2f4c6
13 changed files with 204 additions and 92 deletions
@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import TelemetryPanel from './TelemetryPanel.jsx';
+import DrivePanel from './DrivePanel.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>
+  );
+}
+
+function RoomControlsPlaceholder() {
+  return (
+    <div className="rounded-sm bg-[#242a32] p-1 text-sm text-slate-100">
+      <p className="text-xs text-slate-400">Room controls</p>
+      <p className="text-sm text-slate-200">Coming soon: lighting, docks, and environmental toggles.</p>
+    </div>
+  );
+}
+
+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')}>
+          Telemetry
+        </TabButton>
+        <TabButton active={active === 'room'} onClick={() => setActive('room')}>
+          Room
+        </TabButton>
+        <TabButton active={active === 'advanced'} onClick={() => setActive('advanced')}>
+          Advanced
+        </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">
+            <TelemetryPanel />
+            <DrivePanel />
+          </div>
+        )}
+        {active === 'room' && (
+          <div className="space-y-1">
+            <RoomCameraPanel />
+            <RoomControlsPlaceholder />
+          </div>
+        )}
+        {active === 'advanced' && <AdvancedSettings />}
+        {active === 'help' && <HelpPanel layout={layout} />}
+      </div>
+    </section>
+  );
+}