first commit

src/ui/Header.tsx

@@ -0,0 +1,34 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faGaugeHigh } from "@fortawesome/free-solid-svg-icons";
+import { Link } from "@tanstack/react-router";
+import Logo from "/MAV.svg";
+
+const Header = () => {
+  return (
+    <header className="bg-[#253445] p-4 flex  border-b border-gray-500 justify-between">
+      <div className="w-28">
+        <Link to={"/"}>
+          <img src={Logo} alt="Logo" width={150} height={150} />
+        </Link>
+      </div>
+      <div className="flex gap-4">
+        <Link to="/" className="[&.active]:font-bold">
+          <FontAwesomeIcon icon={faGaugeHigh} />
+          Dashboard
+        </Link>
+
+        <Link to="/baywatch" className="[&.active]:font-bold">
+          Baywatch
+        </Link>
+        <Link to="/output" className="[&.active]:font-bold">
+          Output
+        </Link>
+        <Link to="/settings" className="[&.active]:font-bold">
+          Settings
+        </Link>
+      </div>
+    </header>
+  );
+};
+
+export default Header;