35 lines
1.0 KiB
React
35 lines
1.0 KiB
React
import { useAuth, useAuthModal } from '../auth'
|
|
|
|
export default function ProfileBar() {
|
|
const { user, loading, logout } = useAuth()
|
|
const { openAuthModal } = useAuthModal()
|
|
|
|
return (
|
|
<>
|
|
<div className="profile-bar">
|
|
{loading ? (
|
|
<span className="profile-loading">Загрузка…</span>
|
|
) : user ? (
|
|
<div className="profile-user">
|
|
{user.avatar_url ? (
|
|
<img src={user.avatar_url} alt={user.nickname} className="profile-avatar" />
|
|
) : (
|
|
<div className="profile-avatar profile-avatar-placeholder">
|
|
{user.nickname[0]?.toUpperCase()}
|
|
</div>
|
|
)}
|
|
<span className="profile-name">{user.nickname}</span>
|
|
<button className="link-button" onClick={logout}>
|
|
Выйти
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<button className="btn btn-primary" onClick={openAuthModal}>
|
|
Войти
|
|
</button>
|
|
)}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|