- 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;