- improved grid painting and included resizing

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

@@ -0,0 +1,63 @@
+import Card from "../../../../ui/Card";
+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;
+};
+
+const CameraSettings = ({
+  regions,
+  selectedRegionIndex,
+  onSelectRegion,
+  onChangeRegionColour,
+  isErasing,
+  onSelectErasing,
+}: CameraSettingsProps) => {
+  const [tabIndex, setTabIndex] = useState(0);
+  return (
+    <Card className="p-4 max-h-screen col-span-3">
+      <Tabs
+        selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm mb-1"
+        className="react-tabs"
+        onSelect={(index) => setTabIndex(index)}
+      >
+        <TabList>
+          <Tab>Target Detection</Tab>
+          <Tab>Camera 1</Tab>
+          <Tab>Camera 2</Tab>
+          <Tab>Camera 3</Tab>
+        </TabList>
+        <TabPanel>
+          <RegionSelector
+            regions={regions}
+            selectedRegionIndex={selectedRegionIndex}
+            onSelectRegion={onSelectRegion}
+            onChangeRegionColour={onChangeRegionColour}
+            isErasing={isErasing}
+            onSelectErasing={onSelectErasing}
+          />
+        </TabPanel>
+        <TabPanel>
+          <div>Camera details {tabIndex}</div>
+        </TabPanel>
+        <TabPanel>
+          <div>Camera details {tabIndex}</div>
+        </TabPanel>
+        <TabPanel>
+          <div>Camera details {tabIndex}</div>
+        </TabPanel>
+      </Tabs>
+    </Card>
+  );
+};
+
+export default CameraSettings;

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

@@ -0,0 +1,10 @@
+type ColourPickerProps = {
+  colour: string;
+  setColour: (colour: string) => void;
+};
+
+const ColourPicker = ({ colour, setColour }: ColourPickerProps) => {
+  return <input type="color" name="" id="" value={colour} onChange={(e) => setColour(e.target.value)} />;
+};
+
+export default ColourPicker;

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;