65 lines
1.7 KiB
TypeScript
65 lines
1.7 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;
|
|
settingsPage?: boolean;
|
|
};
|
|
|
|
const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
|
|
const navigate = useNavigate();
|
|
|
|
const navigationDest = (side: string) => {
|
|
if (settingsPage) {
|
|
navigate("/");
|
|
return;
|
|
}
|
|
|
|
if (side === "Front") {
|
|
navigate("/front-camera-settings");
|
|
} else if (side === "Rear") {
|
|
navigate("/Rear-Camera-settings");
|
|
}
|
|
};
|
|
|
|
if (settingsPage) {
|
|
return (
|
|
<>
|
|
{side === "CameraFront" ? (
|
|
<FontAwesomeIcon
|
|
icon={faArrowRight}
|
|
className="absolute top-[50%] right-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce"
|
|
onClick={() => navigationDest(side)}
|
|
/>
|
|
) : (
|
|
<FontAwesomeIcon
|
|
icon={faArrowLeft}
|
|
className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce"
|
|
onClick={() => navigationDest(side)}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
return (
|
|
<>
|
|
{side === "Front" ? (
|
|
<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;
|