code fixes and adding modal

src/components/CameraSettings/CameraSettings.tsx

@@ -1,15 +1,28 @@
+import { useFetchCameraConfig } from "../../hooks/useCameraConfig";
 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 }: { title: string }) => {
+const CameraSettings = ({ title, side }: { title: string; side: string }) => {
+  const { data, isError, isPending, updateCameraConfig } =
+    useFetchCameraConfig(side);
+
   return (
     <Card>
-      <div className="relative flex flex-col space-y-3 h-full">
-        <CardHeader title={title} icon={faWrench} />
-        <CameraSettingFields />
-      </div>
+      {isError && <>Cannot Fetch camera config</>}
+
+      {isPending ? (
+        <>Loading</>
+      ) : (
+        <div className="relative flex flex-col space-y-3 h-full">
+          <CardHeader title={title} icon={faWrench} />
+          <CameraSettingFields
+            initialData={data}
+            updateCameraConfig={updateCameraConfig}
+          />
+        </div>
+      )}
     </Card>
   );
 };