TobaOjo/BayIQ-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- minor tweaks to ui across app

Browse Source
This commit is contained in:
Toba Ojo
2025-11-25 15:49:53 +00:00
parent 0d385061e0
commit 2aa0b4377f
5 changed files with 48 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/ui/Header.tsx
View File

@@ -1,29 +1,39 @@
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">
<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">
<Link to="/" className="[&.active]:font-bold">
<FontAwesomeIcon icon={faGaugeHigh} />
<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">
<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">
<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">
<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>