Merge branch 'develop' into feature/cameraControls-2

src/features/output/components/OSDFields.tsx

@@ -29,7 +29,6 @@ const OSDFields = ({ isOSDLoading }: OSDFieldsProps) => {
     <div>
       <div className="flex flex-col space-y-4">
         <div className="p-4 border border-gray-600 rounded-lg flex flex-col space-y-4">
-          <h2 className="text-2xl mb-4">OSD Options</h2>
           <div className="flex flex-col space-y-4">
             {includeKeys.map((key) => (
               <OSDFieldToggle key={key} value={key} label={key.replace("include", "Include ")} />

src/features/output/components/OSDOptionsCard.tsx

@@ -1,6 +1,8 @@
 import Card from "../../../ui/Card";
 import CardHeader from "../../../ui/CardHeader";
 import OSDFields from "./OSDFields";
+import { Tab, TabList, TabPanel, Tabs } from "react-tabs";
+import "react-tabs/style/react-tabs.css";
 
 type OSDOptionsCardProps = {
   isOSDLoading: boolean;
@@ -10,7 +12,18 @@ const OSDOptionsCard = ({ isOSDLoading }: OSDOptionsCardProps) => {
   return (
     <Card className="p-4 flex-1">
       <CardHeader title="OSD Payload Options" />
-      <OSDFields isOSDLoading={isOSDLoading} />
+      <Tabs>
+        <TabList>
+          <Tab>OSD Settings</Tab>
+          <Tab>payload Settings</Tab>
+        </TabList>
+        <TabPanel>
+          <OSDFields isOSDLoading={isOSDLoading} />
+        </TabPanel>
+        <TabPanel>
+          <div>payload settings</div>
+        </TabPanel>
+      </Tabs>
     </Card>
   );
 };