41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
import { useState } from "react";
|
|
|
|
import VideoFeedGridPainter from "./Video/VideoFeedGridPainter";
|
|
import CameraSettings from "./CameraSettings/CameraSettings";
|
|
import type { Region } from "../../../types/types";
|
|
import PlatePatch from "./PlatePatch/PlatePatch";
|
|
|
|
const CameraGrid = () => {
|
|
const [regions, setRegions] = useState<Region[]>([
|
|
{ name: "Region 1", brushColour: "#ff0000" },
|
|
{ name: "Region 2", brushColour: "#00ff00" },
|
|
{ name: "Region 3", brushColour: "#0400ff" },
|
|
]);
|
|
const [selectedRegionIndex, setSelectedRegionIndex] = useState(0);
|
|
const [mode, setMode] = useState("");
|
|
const [tabIndex, setTabIndex] = useState(0);
|
|
console.log(tabIndex);
|
|
const updateRegionColour = (index: number, newColour: string) => {
|
|
setRegions((prev) => prev.map((r, i) => (i === index ? { ...r, brushColour: newColour } : r)));
|
|
};
|
|
console.log(mode);
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-5 grid-rows-2">
|
|
<VideoFeedGridPainter regions={regions} selectedRegionIndex={selectedRegionIndex} mode={mode} />
|
|
<CameraSettings
|
|
regions={regions}
|
|
selectedRegionIndex={selectedRegionIndex}
|
|
onSelectRegion={setSelectedRegionIndex}
|
|
onChangeRegionColour={updateRegionColour}
|
|
mode={mode}
|
|
onSelectMode={setMode}
|
|
tabIndex={tabIndex}
|
|
setTabIndex={setTabIndex}
|
|
/>
|
|
<PlatePatch />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CameraGrid;
|