43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
|
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;
|