63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
import Card from "../../../../ui/Card";
|
|
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
|
|
import "react-tabs/style/react-tabs.css";
|
|
import CameraPanel from "./CameraPanel";
|
|
|
|
type CameraSettingsProps = {
|
|
setTabIndex: (tabIndex: number) => void;
|
|
tabIndex: number;
|
|
isResetAllModalOpen: boolean;
|
|
handleClose: () => void;
|
|
setIsResetModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
|
};
|
|
|
|
const CameraSettings = ({
|
|
tabIndex,
|
|
setTabIndex,
|
|
isResetAllModalOpen,
|
|
handleClose,
|
|
setIsResetModalOpen,
|
|
}: CameraSettingsProps) => {
|
|
return (
|
|
<Card className="p-4 w-full h-full ">
|
|
<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>Camera A</Tab>
|
|
<Tab>Camera B</Tab>
|
|
<Tab>Camera C</Tab>
|
|
</TabList>
|
|
<TabPanel>
|
|
<CameraPanel
|
|
tabIndex={tabIndex}
|
|
isResetAllModalOpen={isResetAllModalOpen}
|
|
handleClose={handleClose}
|
|
setIsResetModalOpen={setIsResetModalOpen}
|
|
/>
|
|
</TabPanel>
|
|
<TabPanel>
|
|
<CameraPanel
|
|
tabIndex={tabIndex}
|
|
isResetAllModalOpen={isResetAllModalOpen}
|
|
handleClose={handleClose}
|
|
setIsResetModalOpen={setIsResetModalOpen}
|
|
/>
|
|
</TabPanel>
|
|
<TabPanel>
|
|
<CameraPanel
|
|
tabIndex={tabIndex}
|
|
isResetAllModalOpen={isResetAllModalOpen}
|
|
handleClose={handleClose}
|
|
setIsResetModalOpen={setIsResetModalOpen}
|
|
/>
|
|
</TabPanel>
|
|
</Tabs>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default CameraSettings;
|