- started painer on video feed will finish

src/features/cameras/components/CameraGrid.tsx

@@ -1,9 +1,28 @@
-import VideoFeedCard from "./VideoFeedCard";
+import { useState } from "react";
+
+import VideoFeedGridPainter from "./VideoFeedGridPainter";
+import CameraSettings from "./CameraSettings";
+import type { Region } from "../../../types/types";
 
 const CameraGrid = () => {
+  const [regions, setRegions] = useState<Region[]>([
+    { name: "Region 1", brushColour: "#ff0000" },
+    { name: "Region 2", brushColour: "#00ff00" },
+  ]);
+  const [selectedRegionIndex, setSelectedRegionIndex] = useState(0);
+
+  const updateRegionColour = (index: number, newColour: string) => {
+    setRegions((prev) => prev.map((r, i) => (i === index ? { ...r, brushColour: newColour } : r)));
+  };
   return (
     <div className="grid grid-cols-1 md:grid-cols-2">
-      <VideoFeedCard />
+      <VideoFeedGridPainter regions={regions} selectedRegionIndex={selectedRegionIndex} />
+      <CameraSettings
+        regions={regions}
+        selectedRegionIndex={selectedRegionIndex}
+        onSelectRegion={setSelectedRegionIndex}
+        onChangeRegionColour={updateRegionColour}
+      />
     </div>
   );
 };