40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import { Link, useNavigate } from "@tanstack/react-router";
|
|
import { useSession, signOut } from "../../lib/auth-client";
|
|
|
|
const NavAuth = () => {
|
|
const { data: session } = useSession();
|
|
const navigate = useNavigate();
|
|
|
|
const handleSignOut = () => {
|
|
void signOut()
|
|
.then(() => void navigate({ to: "/" }))
|
|
.catch((err) => console.error("Sign out error:", err));
|
|
};
|
|
|
|
return (
|
|
<div className="ml-auto">
|
|
{session ? (
|
|
<button
|
|
onClick={handleSignOut}
|
|
className="text-sm text-(--color-text-muted) transition-colors duration-200
|
|
hover:text-(--color-primary)"
|
|
>
|
|
Sign out{" "}
|
|
<span className="text-(--color-accent)">{session.user.name}</span>
|
|
</button>
|
|
) : (
|
|
<Link
|
|
to="/login"
|
|
className="text-sm font-medium px-4 py-1.5 rounded-full
|
|
text-white bg-(--color-primary)
|
|
hover:bg-(--color-primary-dark)
|
|
transition-colors duration-200"
|
|
>
|
|
Sign in
|
|
</Link>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NavAuth;
|