- minor improvements to painter

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

@@ -3,15 +3,16 @@ import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import "react-tabs/style/react-tabs.css";
 import RegionSelector from "./RegionSelector";
 import type { Region } from "../../../../types/types";
-import { useState } from "react";
 
 type CameraSettingsProps = {
   regions: Region[];
   selectedRegionIndex: number;
   onSelectRegion: (index: number) => void;
   onChangeRegionColour: (index: number, colour: string) => void;
-  isErasing: boolean;
-  onSelectErasing: (isErasing: boolean) => void;
+  mode: string;
+  onSelectMode: (mode: string) => void;
+  setTabIndex: (tabIndex: number) => void;
+  tabIndex: number;
 };
 
 const CameraSettings = ({
@@ -19,10 +20,11 @@ const CameraSettings = ({
   selectedRegionIndex,
   onSelectRegion,
   onChangeRegionColour,
-  isErasing,
-  onSelectErasing,
+  mode,
+  onSelectMode,
+  tabIndex,
+  setTabIndex,
 }: CameraSettingsProps) => {
-  const [tabIndex, setTabIndex] = useState(0);
   return (
     <Card className="p-4 max-h-screen col-span-3">
       <Tabs
@@ -42,8 +44,8 @@ const CameraSettings = ({
             selectedRegionIndex={selectedRegionIndex}
             onSelectRegion={onSelectRegion}
             onChangeRegionColour={onChangeRegionColour}
-            isErasing={isErasing}
-            onSelectErasing={onSelectErasing}
+            mode={mode}
+            onSelectMode={onSelectMode}
           />
         </TabPanel>
         <TabPanel>

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

@@ -6,8 +6,8 @@ type RegionSelectorProps = {
   selectedRegionIndex: number;
   onSelectRegion: (index: number) => void;
   onChangeRegionColour: (index: number, colour: string) => void;
-  isErasing: boolean;
-  onSelectErasing: (isErasing: boolean) => void;
+  mode: string;
+  onSelectMode: (mode: string) => void;
 };
 
 const RegionSelector = ({
@@ -15,32 +15,52 @@ const RegionSelector = ({
   selectedRegionIndex,
   onSelectRegion,
   onChangeRegionColour,
-  isErasing,
-  onSelectErasing,
+  mode,
+  onSelectMode,
 }: RegionSelectorProps) => {
-  const handleChange = () => {
-    onSelectErasing(!isErasing);
+  const handleChange = (e: { target: { value: string } }) => {
+    onSelectMode(e.target.value);
   };
 
   return (
     <div>
       <div>
-        <h2>Region Select</h2>
+        <h2 className="text-xl">Region Select</h2>
       </div>
       <div>
         {regions.map((region, idx) => (
-          <div key={region.name}>
+          <div
+            key={region.name}
+            className="items-center p-4 border border-gray-700 bg-slate-700 rounded-xl m-4 w-[40%]"
+          >
             <label style={{ marginRight: "0.5rem" }}>
-              <input type="radio" checked={selectedRegionIndex === idx} onChange={() => onSelectRegion(idx)} />{" "}
+              <input
+                type="radio"
+                checked={selectedRegionIndex === idx}
+                onChange={() => {
+                  onSelectMode("painter");
+                  onSelectRegion(idx);
+                }}
+              />{" "}
               {region.name}
             </label>
             <ColourPicker colour={region.brushColour} setColour={(c: string) => onChangeRegionColour(idx, c)} />
           </div>
         ))}
-        <label htmlFor="">
-          <input type="checkbox" onChange={handleChange} checked={isErasing} />
-          Eraser
-        </label>
+        <div>
+          <h2 className="text-xl">Tools</h2>
+        </div>
+        <div className="flex flex-col">
+          <label htmlFor="mode">
+            <input id="mode" type="radio" onChange={handleChange} checked={mode === "painter"} value="painter" />
+            Paint mode
+          </label>
+
+          <label htmlFor="erase">
+            <input type="radio" onChange={handleChange} checked={mode === "eraser"} value={"eraser"} />
+            Erase mode
+          </label>
+        </div>
       </div>
     </div>
   );