- added add and remove regions on paint selector

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

@@ -10,6 +10,8 @@ type RegionSelectorProps = {
   mode: string;
   onSelectMode: (mode: string) => void;
   paintedCells: RefObject<Map<string, PaintedCell>>;
+  onAddRegion: () => void;
+  OnRemoveRegion: () => void;
 };
 
 const RegionSelector = ({
@@ -20,16 +22,26 @@ const RegionSelector = ({
   mode,
   onSelectMode,
   paintedCells,
+  onAddRegion,
+  OnRemoveRegion,
 }: RegionSelectorProps) => {
   const handleChange = (e: { target: { value: string } }) => {
     onSelectMode(e.target.value);
   };
 
+  const handleAddClick = () => {
+    onAddRegion();
+  };
+
   const handleResetClick = () => {
     const map = paintedCells.current;
     map.clear();
   };
 
+  const handleRemoveClick = () => {
+    OnRemoveRegion();
+  };
+
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 md:grid-rows-2 gap-4">
       <div className="p-2 border border-gray-600 rounded-lg flex flex-col">
@@ -102,6 +114,14 @@ const RegionSelector = ({
             );
           })}
         </>
+        <div className=" mx-auto flex flex-row gap-4  mt-4">
+          <button className="border border-blue-900 bg-blue-700 px-4 rounded-md" onClick={handleAddClick}>
+            Add Region
+          </button>
+          <button className="border border-red-900 px-4 rounded-md" onClick={handleRemoveClick}>
+            Remove Region
+          </button>
+        </div>
       </div>
 
       <div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2 h-50">