Mav-Mobile-UI/src/components/UI/NavigationArrow.tsx

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 z-30"
            onClick={() => navigationDest(side)}
          />
        ) : (
          <FontAwesomeIcon
            icon={faArrowLeft}
            className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-30"
            onClick={() => navigationDest(side)}
          />
        )}
      </>
    );
  }
  return (
    <>
      {side === "Front" ? (
        <FontAwesomeIcon
          icon={faArrowLeft}
          className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-30"
          onClick={() => navigationDest(side)}
        />
      ) : (
        <FontAwesomeIcon
          icon={faArrowRight}
          className="absolute top-[50%] right-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-30"
          onClick={() => navigationDest(side)}
        />
      )}
    </>
  );
};

export default NavigationArrow;