44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
'use client'
|
|
|
|
import { useRouter } from 'next/navigation'
|
|
import NavLink from './NavLink'
|
|
|
|
interface Props {
|
|
username: string
|
|
isAdmin: boolean
|
|
}
|
|
|
|
export default function HeaderNav({ username, isAdmin }: Props) {
|
|
const router = useRouter()
|
|
|
|
async function handleLogout() {
|
|
await fetch('/api/auth/logout', { method: 'POST' })
|
|
router.push('/login')
|
|
router.refresh()
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-3">
|
|
{isAdmin && <NavLink href="/manage">Manage</NavLink>}
|
|
<span className="text-sm" style={{ color: 'var(--text-secondary)' }}>
|
|
{username}
|
|
</span>
|
|
<button
|
|
onClick={handleLogout}
|
|
className="text-sm px-3 py-1.5 rounded-lg transition-colors"
|
|
style={{ color: 'var(--text-secondary)' }}
|
|
onMouseEnter={(e) => {
|
|
(e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'
|
|
;(e.currentTarget as HTMLElement).style.color = 'var(--text-primary)'
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
;(e.currentTarget as HTMLElement).style.backgroundColor = 'transparent'
|
|
;(e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)'
|
|
}}
|
|
>
|
|
Sign Out
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|