44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
|
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";
|
||
|
|
|
||
|
|
type CameraSettingsProps = {
|
||
|
|
regions: Region[];
|
||
|
|
selectedRegionIndex: number;
|
||
|
|
onSelectRegion: (index: number) => void;
|
||
|
|
onChangeRegionColour: (index: number, colour: string) => void;
|
||
|
|
};
|
||
|
|
|
||
|
|
const CameraSettings = ({
|
||
|
|
regions,
|
||
|
|
selectedRegionIndex,
|
||
|
|
onSelectRegion,
|
||
|
|
onChangeRegionColour,
|
||
|
|
}: CameraSettingsProps) => {
|
||
|
|
return (
|
||
|
|
<Card className="p-4 min-h-screen">
|
||
|
|
<Tabs selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm">
|
||
|
|
<TabList>
|
||
|
|
<Tab>Target Detection</Tab>
|
||
|
|
<Tab>Camera 1</Tab>
|
||
|
|
</TabList>
|
||
|
|
<TabPanel>
|
||
|
|
<RegionSelector
|
||
|
|
regions={regions}
|
||
|
|
selectedRegionIndex={selectedRegionIndex}
|
||
|
|
onSelectRegion={onSelectRegion}
|
||
|
|
onChangeRegionColour={onChangeRegionColour}
|
||
|
|
/>
|
||
|
|
</TabPanel>
|
||
|
|
<TabPanel>
|
||
|
|
<div>Camera details</div>
|
||
|
|
</TabPanel>
|
||
|
|
</Tabs>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default CameraSettings;
|