`src/components/user-badge.tsx`

48 lines
'use client'

import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'

interface UserInfo {
  authenticated: boolean
  username?: string
}

export function UserBadge() {
  const [user, setUser] = useState<UserInfo | null>(null)
  const router = useRouter()

  useEffect(() => {
    fetch('/api/auth/me')
      .then(r => r.json())
      .then(data => setUser(data))
      .catch(() => setUser(null))
  }, [])

  if (!user?.authenticated) return null

  async function handleLogout() {
    await fetch('/api/auth', { method: 'DELETE' })
    router.push('/login')
  }

  const initial = user.username?.charAt(0).toUpperCase() ?? '?'

  return (
    <div className="flex items-center gap-2">
      <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-600 text-xs font-bold text-white">
        {initial}
      </div>
      <span className="hidden text-sm font-medium text-slate-700 sm:inline">
        {user.username}
      </span>
      <button
        onClick={handleLogout}
        className="ml-1 rounded px-2 py-1 text-xs text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-700"
      >
        Logout
      </button>
    </div>
  )
}