added zoom functionality, need to add endpoint to post

src/components/CameraSettings/CameraSettings.tsx

@@ -1,18 +1,23 @@
 import { useFetchCameraConfig } from "../../hooks/useCameraConfig";
+import type { ZoomLevel } from "../../types/types";
 import Card from "../UI/Card";
 import CardHeader from "../UI/CardHeader";
 import CameraSettingFields from "./CameraSettingFields";
 import { faWrench } from "@fortawesome/free-solid-svg-icons";
 
-const CameraSettings = ({ title, side }: { title: string; side: string }) => {
-  const {
-    data,
-    isError,
-    isPending,
-    updateCameraConfig,
-    updateCameraConfigError,
-  } = useFetchCameraConfig(side);
-  console.log(updateCameraConfigError);
+const CameraSettings = ({
+  title,
+  side,
+  zoomLevel,
+  onZoomLevelChange,
+}: {
+  title: string;
+  side: string;
+  zoomLevel?: ZoomLevel;
+  onZoomLevelChange?: (level: ZoomLevel) => void;
+}) => {
+  const { data, isError, isPending, updateCameraConfig } =
+    useFetchCameraConfig(side);
 
   return (
     <Card className="overflow-hidden min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[40%] p-4">
@@ -23,6 +28,8 @@ const CameraSettings = ({ title, side }: { title: string; side: string }) => {
         <CameraSettingFields
           initialData={data}
           updateCameraConfig={updateCameraConfig}
+          zoomLevel={zoomLevel}
+          onZoomLevelChange={onZoomLevelChange}
         />
       </div>
     </Card>