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

import { Link } from "react-router";
import Logo from "/MAV.svg";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGear } from "@fortawesome/free-solid-svg-icons";
import { faListCheck } from "@fortawesome/free-solid-svg-icons";

const Header = () => {
  return (
    <div className="relative bg-[#253445] border-b border-gray-500 items-center mx-auto px-2 sm:px-6 lg:px-8 p-4 flex flex-row justify-between">
      {/* Left: Logo */}
      <div className="w-30">
        <Link to={"/"}>
          <img src={Logo} alt="Logo" width={150} height={150} />
        </Link>
      </div>
      <div className="flex items-center space-x-8">
        <Link to={"/session-settings"}>
          <FontAwesomeIcon icon={faListCheck} />
        </Link>
        <Link to={"/system-settings"}>
          <FontAwesomeIcon icon={faGear} />
        </Link>
      </div>
    </div>
  );
};


export default Header;