updated image loading

src/components/RearCameraOverview/RearCameraOverviewCard.tsx

@@ -1,10 +1,11 @@
 import clsx from "clsx";
 import Card from "../UI/Card";
-import { SnapshotContainer } from "../CameraOverview/SnapshotContainer";
+// import { SnapshotContainer } from "../CameraOverview/SnapshotContainer";
 import { useSwipeable } from "react-swipeable";
 import { useNavigate } from "react-router";
 import CardHeader from "../UI/CardHeader";
 import { faCamera } from "@fortawesome/free-regular-svg-icons";
+import SightingOverview from "../SightingOverview/SightingOverview";
 
 type CardProps = React.HTMLAttributes<HTMLDivElement>;
 
@@ -12,14 +13,21 @@ const RearCameraOverviewCard = ({ className }: CardProps) => {
   const navigate = useNavigate();
   const handlers = useSwipeable({
     onSwipedLeft: () => navigate("/rear-camera-settings"),
+    onSwipedDown: () => navigate("/system-settings"),
     trackMouse: true,
   });
 
   return (
-    <Card className={clsx("min-h-[40vh] md:min-h-[60vh] h-auto", className)}>
+    <Card
+      className={clsx(
+        "relative min-h-[40vh] md:min-h-[60vh] h-auto",
+        className
+      )}
+    >
       <div className="flex flex-col space-y-3 h-full" {...handlers}>
         <CardHeader title="Rear Overiew" icon={faCamera} />
-        <SnapshotContainer side="TargetDetectionRear" />
+        <SightingOverview />
+        {/* <SnapshotContainer side="TargetDetectionRear" /> */}
       </div>
     </Card>
   );