added sighting feed

src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx

@@ -2,12 +2,14 @@ import clsx from "clsx";
 import Card from "../UI/Card";
 import CardHeader from "../UI/CardHeader";
 import { faCamera } from "@fortawesome/free-regular-svg-icons";
-import { SnapshotContainer } from "../CameraOverview/SnapshotContainer";
 import { useSwipeable } from "react-swipeable";
 import { useNavigate } from "react-router";
 import { useOverviewVideo } from "../../hooks/useOverviewVideo";
+import SightingOverview from "../SightingOverview/SightingOverview";
 
-const FrontCameraOverviewCard = () => {
+type CardProps = React.HTMLAttributes<HTMLDivElement>;
+
+const FrontCameraOverviewCard = ({ className }: CardProps) => {
   useOverviewVideo();
   const navigate = useNavigate();
   const handlers = useSwipeable({
@@ -16,10 +18,16 @@ const FrontCameraOverviewCard = () => {
   });
 
   return (
-    <Card className={clsx("relative min-h-[40vh] md:min-h-[60vh] h-auto")}>
+    <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="Front Overiew" icon={faCamera} />
-        <SnapshotContainer side="TargetDetectionFront" />
+        <SightingOverview />
+        {/* <SnapshotContainer side="TargetDetectionFront" /> */}
       </div>
     </Card>
   );