Files
lara-bermite/resources/js/components/Header.tsx
2024-03-06 09:42:12 +01:00

32 lines
1.1 KiB
TypeScript

import React from "react"
import {Link, useLocation} from "react-router-dom"
import useAuthUser from "../hooks/AuthUser"
const Header = () => {
const {authUser} = useAuthUser()
const location = useLocation()
return <header className="flex justify-between bg-blue-700 px-5 py-3 text-xl text-white">
<div>
<Link to="/">Bermite</Link>
</div>
{authUser?.locations && authUser.locations.length > 0 && <nav className="flex gap-2">
<Link to="/pluviometrie" className={location.pathname === '/pluviometrie' ? 'font-bold' : ''}>Pluviométrie</Link>
<Link to="/meteo" className={location.pathname === '/meteo' ? 'font-bold' : ''}>Météo</Link>
</nav>}
{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>
{/*<Link to="/sinscrire">S'inscrire</Link>*/}
</span>}
</header>
}
export default Header