added forms and refactored component names

src/components/UI/NavigationArrow.tsx

@@ -0,0 +1,42 @@
+import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate } from "react-router";
+
+type NavigationArrowProps = {
+  side: string;
+};
+
+const NavigationArrow = ({ side }: NavigationArrowProps) => {
+  const navigate = useNavigate();
+
+  const navigationDest = (side: string) => {
+    if (side === "CameraFront") {
+      navigate("/front-camera-settings");
+    } else if (side === "Rear") {
+      navigate("/");
+    } else if (side === "TargetDetectionRear") {
+      navigate("/Rear-Camera-settings");
+    } else {
+      navigate("/");
+    }
+  };
+  return (
+    <>
+      {side === "CameraFront" || side === "Rear" ? (
+        <FontAwesomeIcon
+          icon={faArrowLeft}
+          className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce"
+          onClick={() => navigationDest(side)}
+        />
+      ) : (
+        <FontAwesomeIcon
+          icon={faArrowRight}
+          className="absolute top-[50%] right-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce"
+          onClick={() => navigationDest(side)}
+        />
+      )}
+    </>
+  );
+};
+
+export default NavigationArrow;