Refactor camera feed handling to support dynamic camera IDs and improve context management

src/features/cameras/components/CameraSettings/CameraSettings.tsx

@@ -2,6 +2,7 @@ import Card from "../../../../ui/Card";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import "react-tabs/style/react-tabs.css";
 import CameraPanel from "./CameraPanel";
+import { CAMERA_IDS } from "../../../../app/config/cameraConfig";
 
 type CameraSettingsProps = {
   setTabIndex: (tabIndex: number) => void;
@@ -12,7 +13,6 @@ type CameraSettingsProps = {
 };
 
 const CameraSettings = ({
-  tabIndex,
   setTabIndex,
   isResetAllModalOpen,
   handleClose,
@@ -26,34 +26,20 @@ const CameraSettings = ({
         onSelect={(index) => setTabIndex(index)}
       >
         <TabList>
-          <Tab>Camera A</Tab>
-          <Tab>Camera B</Tab>
-          <Tab>Camera C</Tab>
+          {CAMERA_IDS.map((id) => (
+            <Tab key={id}>Camera {id}</Tab>
+          ))}
         </TabList>
-        <TabPanel>
-          <CameraPanel
-            tabIndex={tabIndex}
-            isResetAllModalOpen={isResetAllModalOpen}
-            handleClose={handleClose}
-            setIsResetModalOpen={setIsResetModalOpen}
-          />
-        </TabPanel>
-        <TabPanel>
-          <CameraPanel
-            tabIndex={tabIndex}
-            isResetAllModalOpen={isResetAllModalOpen}
-            handleClose={handleClose}
-            setIsResetModalOpen={setIsResetModalOpen}
-          />
-        </TabPanel>
-        <TabPanel>
-          <CameraPanel
-            tabIndex={tabIndex}
-            isResetAllModalOpen={isResetAllModalOpen}
-            handleClose={handleClose}
-            setIsResetModalOpen={setIsResetModalOpen}
-          />
-        </TabPanel>
+        {CAMERA_IDS.map((id, index) => (
+          <TabPanel key={id}>
+            <CameraPanel
+              tabIndex={index}
+              isResetAllModalOpen={isResetAllModalOpen}
+              handleClose={handleClose}
+              setIsResetModalOpen={setIsResetModalOpen}
+            />
+          </TabPanel>
+        ))}
       </Tabs>
     </Card>
   );