- improved grid painting and included resizing

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

@@ -0,0 +1,49 @@
+import ColourPicker from "./ColourPicker";
+import type { Region } from "../../../../types/types";
+
+type RegionSelectorProps = {
+  regions: Region[];
+  selectedRegionIndex: number;
+  onSelectRegion: (index: number) => void;
+  onChangeRegionColour: (index: number, colour: string) => void;
+  isErasing: boolean;
+  onSelectErasing: (isErasing: boolean) => void;
+};
+
+const RegionSelector = ({
+  regions,
+  selectedRegionIndex,
+  onSelectRegion,
+  onChangeRegionColour,
+  isErasing,
+  onSelectErasing,
+}: RegionSelectorProps) => {
+  const handleChange = () => {
+    onSelectErasing(!isErasing);
+  };
+
+  return (
+    <div>
+      <div>
+        <h2>Region Select</h2>
+      </div>
+      <div>
+        {regions.map((region, idx) => (
+          <div key={region.name}>
+            <label style={{ marginRight: "0.5rem" }}>
+              <input type="radio" checked={selectedRegionIndex === idx} onChange={() => 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>
+    </div>
+  );
+};
+
+export default RegionSelector;