Files
ticcat/resources/js/components/Header.tsx
2024-03-04 17:17:46 +01:00

37 lines
1.2 KiB
TypeScript

import React from "react"
import {Link, NavLink, useLocation} from "react-router-dom"
import useAuthUser from "../hooks/AuthUser"
import Tracker from "./TimeTrackers/Tracker"
import {env} from "../utilities/env"
const Header = () => {
const {authUser} = useAuthUser()
const location = useLocation()
console.log(authUser)
return <header className="bg-blue-700 text-xl text-white">
<div className="flex justify-between px-5 py-3">
<div>
<Link to="/">Ticcat</Link>
</div>
{authUser && <Tracker />}
{authUser
? <span className="flex gap-2">
<Link to="/profile" className={location.pathname === '/profile' ? 'font-bold' : ''}>{authUser.name}</Link>
</span>
: <span className="flex gap-2">
<Link to="/connexion">Connexion</Link>
{env.VITE_REGISTER_DISABLED === 'false' && <Link to="/sinscrire">S&apos;inscrire</Link>}
</span>}
</div>
<nav className="flex gap-5 bg-gray-600 px-5">
<NavLink to="/">ToDos</NavLink>
<NavLink to="/times">Times</NavLink>
</nav>
</header>
}
export default Header