Mav-Mobile-UI/src/pages/RearCamera.tsx

import OverviewVideoContainer from "../components/FrontCameraSettings/OverviewVideoContainer";
import CameraSettings from "../components/CameraSettings/CameraSettings";
import { Toaster } from "sonner";
import { useState } from "react";
import type { ZoomLevel } from "../types/types";

const RearCamera = () => {
  const [zoomLevel, setZoomLevel] = useState<ZoomLevel>({
    left: 0,
    top: 0,
    x: 0,
    y: 0,
    px: 0,
    py: 0,
    level: 1,
  });
  return (
    <div className="mx-auto flex flex-col lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">
      <CameraSettings
        title="Rear Camera Settings"
        side={"CameraRear"}
        zoomLevel={zoomLevel}
        onZoomLevelChange={setZoomLevel}
      />
      <OverviewVideoContainer
        title={"Rear Camera"}
        side={"CameraRear"}
        settingsPage={true}
        zoomLevel={zoomLevel}
        onZoomLevelChange={setZoomLevel}
      />
      <Toaster />
    </div>
  );
};

export default RearCamera;