initial commit

src/components/RearCameraOverview/RearCameraOverviewCard.tsx

@@ -0,0 +1,25 @@
+import clsx from "clsx";
+import Card from "../UI/Card";
+import { SnapshotContainer } from "../CameraOverview/SnapshotContainer";
+import { useSwipeable } from "react-swipeable";
+import { useNavigate } from "react-router";
+import CameraOverviewHeader from "../CameraOverview/CameraOverviewHeader";
+
+const RearCameraOverviewCard = () => {
+  const navigate = useNavigate();
+  const handlers = useSwipeable({
+    onSwipedLeft: () => navigate("/rear-camera-settings"),
+    trackMouse: true,
+  });
+
+  return (
+    <Card className={clsx("min-h-[40vh] md:min-h-[60vh] h-auto")}>
+      <div className="flex flex-col space-y-3 h-full" {...handlers}>
+        <CameraOverviewHeader title="Rear Overiew" />
+        <SnapshotContainer side="TargetDetectionRear" />
+      </div>
+    </Card>
+  );
+};
+
+export default RearCameraOverviewCard;