73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
'use client'
|
||
import { useEffect, useState } from 'react'
|
||
import { useRouter } from 'next/navigation'
|
||
import Link from 'next/link'
|
||
import Image from 'next/image'
|
||
|
||
interface UserProfile {
|
||
username: string
|
||
first_name?: string
|
||
avatarUrl?: string
|
||
}
|
||
|
||
export function Header() {
|
||
const [user, setUser] = useState<UserProfile | null>(null)
|
||
const router = useRouter()
|
||
useEffect(() => {
|
||
const token = localStorage.getItem('token')
|
||
if (!token) {
|
||
return
|
||
}
|
||
fetch('/api/auth/user/', {
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
})
|
||
.then(res => {
|
||
if (!res.ok) throw new Error('unauth')
|
||
return res.json()
|
||
})
|
||
.then(setUser)
|
||
.catch(() => {
|
||
localStorage.removeItem('token')
|
||
router.push('/auth/login')
|
||
})
|
||
}, [router])
|
||
|
||
const logout = () => {
|
||
localStorage.removeItem('token')
|
||
router.push('/')
|
||
}
|
||
|
||
return (
|
||
<nav className="navbar navbar-expand bg-light fixed-top">
|
||
<div className="container">
|
||
<Link href="/" className="navbar-brand">
|
||
<Image src="/assets/img/CAT.png" width={89} height={89} alt="CatLink"/>
|
||
</Link>
|
||
<div className="collapse navbar-collapse">
|
||
{user ? (
|
||
<div className="ms-auto d-flex align-items-center">
|
||
<Link href="/dashboard" className="me-3 d-flex align-items-center">
|
||
<Image
|
||
src={user.avatarUrl || '/assets/img/avatar-dhg.png'}
|
||
width={32}
|
||
height={32}
|
||
className="rounded-circle"
|
||
alt="avatar"
|
||
/>
|
||
<span className="ms-2">{user.first_name || user.username}</span>
|
||
</Link>
|
||
<button className="btn btn-outline-danger" onClick={logout}>
|
||
Выход
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<Link href="/auth/login" className="btn btn-primary ms-auto">
|
||
Вход
|
||
</Link>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
)
|
||
}
|