67 lines
1.9 KiB
TypeScript
67 lines
1.9 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 | undefined;
|
|
settingsPage?: boolean;
|
|
};
|
|
|
|
const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
|
|
const navigate = useNavigate();
|
|
|
|
const navigationDest = (side: string | undefined) => {
|
|
if (settingsPage) {
|
|
navigate("/");
|
|
return;
|
|
}
|
|
|
|
if (side === "Front") {
|
|
navigate("/a-camera-settings");
|
|
} else if (side === "Rear") {
|
|
navigate("/b-Camera-settings");
|
|
}
|
|
};
|
|
|
|
if (settingsPage) {
|
|
return (
|
|
<>
|
|
{side === "CameraA" ? (
|
|
<FontAwesomeIcon
|
|
size="2xl"
|
|
icon={faArrowRight}
|
|
className="absolute top-[50%] right-[2%] backdrop-blur-lg hover:cursor-pointer animate-bounce z-30 rounded-md arrow-outline"
|
|
onClick={() => navigationDest("a")}
|
|
/>
|
|
) : (
|
|
<FontAwesomeIcon
|
|
icon={faArrowLeft}
|
|
size="2xl"
|
|
className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-30 rounded-md arrow-outline"
|
|
onClick={() => navigationDest("b")}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
return (
|
|
<>
|
|
<FontAwesomeIcon
|
|
icon={faArrowLeft}
|
|
size="2xl"
|
|
className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-100 arrow-outline rounded-md"
|
|
onClick={() => navigationDest("Front")}
|
|
/>
|
|
|
|
<FontAwesomeIcon
|
|
icon={faArrowRight}
|
|
size="2xl"
|
|
className="absolute top-[50%] right-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-100 arrow-outline rounded-md"
|
|
onClick={() => navigationDest("Rear")}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default NavigationArrow;
|