added zoom functionality, need to add endpoint to post

src/components/CameraOverview/SnapshotContainer.tsx

@@ -1,17 +1,21 @@
 import { useGetOverviewSnapshot } from "../../hooks/useGetOverviewSnapshot";
+import type { ZoomLevel } from "../../types/types";
 import NavigationArrow from "../UI/NavigationArrow";
 
 type SnapshotContainerProps = {
   side: string;
   settingsPage?: boolean;
+  zoomLevel?: ZoomLevel;
+  onZoomLevelChange?: (level: ZoomLevel) => void;
 };
 
 export const SnapshotContainer = ({
   side,
   settingsPage,
+  zoomLevel,
+  onZoomLevelChange,
 }: SnapshotContainerProps) => {
   const { canvasRef, isError, isPending } = useGetOverviewSnapshot();
-
   if (isError) return <p className="h-100">An error occurred</p>;
   if (isPending) return <p className="h-100">Loading...</p>;
 
@@ -27,14 +31,20 @@ export const SnapshotContainer = ({
     if (!cw || !ch) return;
     const px = x / cw;
     const py = y / ch;
-    console.log({
-      left,
-      top,
-      x,
-      y,
-      px,
-      py,
-    });
+
+    const baseLevel = zoomLevel?.level ?? 1;
+    const newLevel = baseLevel >= 8 ? 1 : baseLevel * 2;
+
+    if (onZoomLevelChange)
+      onZoomLevelChange({
+        left,
+        top,
+        x,
+        y,
+        px,
+        py,
+        level: newLevel,
+      });
   };
 
   return (