added forms and refactored component names

src/components/CameraOverview/SnapshotContainer.tsx

@@ -1,7 +1,5 @@
-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";
+import NavigationArrow from "../UI/NavigationArrow";
 
 type SnapshotContainerProps = {
   side: string;
@@ -9,24 +7,11 @@ type SnapshotContainerProps = {
 
 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" />
+      <NavigationArrow side={side} />
+      <canvas ref={canvasRef} className="w-full h-full object-contain block " />
     </div>
   );
 };