initial commit

src/components/CameraOverview/CameraOverviewHeader.tsx

@@ -0,0 +1,22 @@
+import { faCamera } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import clsx from "clsx";
+
+type CameraOverviewHeaderProps = {
+  title: string;
+};
+
+const CameraOverviewHeader = ({ title }: CameraOverviewHeaderProps) => {
+  return (
+    <div
+      className={clsx(
+        "w-full border-b border-gray-600 flex flex-row items-center space-x-2 md:mb-6"
+      )}
+    >
+      <FontAwesomeIcon icon={faCamera} className="size-4" />
+      <h2 className="text-xl">{title}</h2>
+    </div>
+  );
+};
+
+export default CameraOverviewHeader;

src/components/CameraOverview/SnapshotContainer.tsx

@@ -0,0 +1,32 @@
+import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useGetOverviewSnapshot } from "../../hooks/useGetOverviewSnapshot";
+import { useNavigate } from "react-router";
+
+type SnapshotContainerProps = {
+  side: string;
+};
+
+export const SnapshotContainer = ({ side }: SnapshotContainerProps) => {
+  const { canvasRef } = useGetOverviewSnapshot(side);
+  const navigate = useNavigate();
+
+  return (
+    <div className="relative w-full aspect-video">
+      {side === "CameraFront" || side === "Rear" ? (
+        <FontAwesomeIcon
+          icon={faArrowLeft}
+          className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer"
+          onClick={() => navigate("/front-camera-settings")}
+        />
+      ) : (
+        <FontAwesomeIcon
+          icon={faArrowRight}
+          className="absolute top-[50%] right-[2%] backdrop-blur-md"
+        />
+      )}
+
+      <canvas ref={canvasRef} className="w-full h-full object-contain block" />
+    </div>
+  );
+};