Files
lara-bermite/resources/js/components/Header.tsx
2023-09-10 08:49:10 +02:00

28 lines
906 B
TypeScript

import React from "react";
import {Link} from "react-router-dom";
import useAuthUser from "../hooks/AuthUser";
const Header = () => {
const {authUser, logout} = useAuthUser()
return <header className="bg-blue-700 text-white py-3 px-5 text-xl flex justify-between">
<div>
<Link to="/">Bermite</Link>
</div>
{authUser && <nav className="flex gap-2">
<Link to="/pluviometrie">Pluviométrie</Link>
<Link to="/meteo">Météo</Link>
</nav>}
{authUser ? <span className="flex gap-2"><Link to="/profile">{authUser.name}</Link><button onClick={logout}>logout</button></span>
: <span className="flex gap-2">
<Link to="/connexion">Connexion</Link>
<Link to="/sinscrire">S'inscrire</Link>
</span>}
</header>
}
export default Header