You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
44 lines
1.3 KiB
44 lines
1.3 KiB
import AccountSvg from "../../assets/account.svg?react"
|
|
import "../../style/template/header.css"
|
|
import { useUser } from "../../App.tsx"
|
|
import { useNavigate } from "react-router-dom"
|
|
|
|
export function Header() {
|
|
const navigate = useNavigate()
|
|
const [user, ] = useUser()
|
|
|
|
const accountImage = user?.profilePicture
|
|
? <img id="img-account" src={user.profilePicture} alt={"profile-picture"} />
|
|
: <AccountSvg id="img-account" />
|
|
|
|
return (
|
|
<div id="header">
|
|
<div id="header-left"></div>
|
|
<div id="header-center">
|
|
<p
|
|
id="iqball"
|
|
className="clickable"
|
|
onClick={() => navigate("/")}>
|
|
IQBall
|
|
</p>
|
|
</div>
|
|
<div id="header-right">
|
|
<div
|
|
className="clickable"
|
|
id="clickable-header-right"
|
|
onClick={() => {
|
|
if (user) {
|
|
navigate("/settings")
|
|
return
|
|
}
|
|
|
|
navigate("/login")
|
|
}}>
|
|
{accountImage}
|
|
<p id="username">{user?.name ?? "Log In"}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|