45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
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 items-center">
|
|
<div className="w-28">
|
|
<Link to={"/"}>
|
|
<img src={Logo} alt="Logo" width={150} height={150} />
|
|
</Link>
|
|
</div>
|
|
<div className="flex gap-4 text-lg items-center">
|
|
<Link
|
|
to="/"
|
|
className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
|
|
>
|
|
{/* <FontAwesomeIcon icon={faGaugeHigh} /> */}
|
|
Dashboard
|
|
</Link>
|
|
|
|
<Link
|
|
to="/baywatch"
|
|
className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
|
|
>
|
|
Cameras
|
|
</Link>
|
|
<Link
|
|
to="/output"
|
|
className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
|
|
>
|
|
Output
|
|
</Link>
|
|
<Link
|
|
to="/settings"
|
|
className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
|
|
>
|
|
Settings
|
|
</Link>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header;
|