Something went wrong. Try again.
https://checkmate.social
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152/** * Header — top navigation bar with branding, user info, and connection status. */
import { useAuth } from '../../hooks/useAuth';import { useGame } from '../../hooks/useGame';
export function Header() { const { handle, displayName, avatarUrl, logout } = useAuth(); const { connected } = useGame();
return ( <header className="flex items-center justify-between border-b border-wood-700 bg-wood-900/90 px-4 py-3 backdrop-blur-sm md:px-5"> {/* Branding */} <div className="flex min-w-0 items-center gap-2.5"> <span className="select-none text-lg text-gold-500">♔</span> <h1 className="font-serif text-xl font-bold tracking-tight text-gold-400"> Checkmate </h1> <div className={`ml-0.5 h-1.5 w-1.5 shrink-0 rounded-full transition-colors ${connected ? 'bg-felt-500' : 'bg-red-500'}`} title={connected ? 'Connected' : 'Disconnected'} /> </div>
{/* User controls */} {handle && ( <div className="flex min-w-0 items-center gap-3"> <div className="flex min-w-0 items-center gap-2"> {avatarUrl && ( <img src={avatarUrl} alt={displayName ?? handle} className="h-7 w-7 shrink-0 rounded-full ring-1 ring-wood-600" /> )} <span className="min-w-0 truncate text-sm text-wood-300"> {displayName ?? handle} </span> </div> <button onClick={logout} className="flex min-h-[44px] -my-2.5 shrink-0 items-center rounded px-3 text-xs text-wood-500 transition-colors hover:bg-wood-700 hover:text-wood-200" > Sign out </button> </div> )} </header> );}