initial commit

src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx

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