Inna
4a783d165f
- components/Header.tsx (server, lee sesión): marca, nav (Inicio; login/register o account/logout según sesión), LanguageSwitcher y LogoutButton. - components/LanguageSwitcher.tsx (cliente): cambia de idioma conservando la ruta (next-intl usePathname/useRouter). components/LogoutButton.tsx (compartido). - components/Footer.tsx. app/[locale]/layout.tsx envuelve children con Header/Footer (columna min-h-screen). Se unifica el LogoutButton (se borra el de account/). - messages: namespace Nav. Verificado: home ES/EN con cabecera+nav+idioma+pie; enlaces locale-aware (/en/login); textos por idioma. Al leer sesión en el header, todas las rutas pasan a dinámicas. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
import { getTranslations } from 'next-intl/server'
|
|
import { Link } from '@/i18n/navigation'
|
|
import { getSession } from '@/lib/session'
|
|
import { LanguageSwitcher } from './LanguageSwitcher'
|
|
import { LogoutButton } from './LogoutButton'
|
|
|
|
export async function Header() {
|
|
const t = await getTranslations('Nav')
|
|
const session = await getSession()
|
|
const loggedIn = Boolean(session.username)
|
|
|
|
return (
|
|
<header className="border-b border-amber-900/50 bg-[#241812]">
|
|
<div className="mx-auto flex max-w-5xl items-center justify-between gap-4 px-4 py-3">
|
|
<Link href="/" className="text-xl font-bold tracking-wide text-amber-500">
|
|
Nova WoW
|
|
</Link>
|
|
<nav className="flex items-center gap-4 text-sm">
|
|
<Link href="/" className="text-amber-200 hover:text-amber-400">
|
|
{t('home')}
|
|
</Link>
|
|
{loggedIn ? (
|
|
<>
|
|
<Link href="/account" className="text-amber-200 hover:text-amber-400">
|
|
{t('account')}
|
|
</Link>
|
|
<LogoutButton />
|
|
</>
|
|
) : (
|
|
<>
|
|
<Link href="/login" className="text-amber-200 hover:text-amber-400">
|
|
{t('login')}
|
|
</Link>
|
|
<Link
|
|
href="/register"
|
|
className="rounded bg-amber-600 px-3 py-1 font-semibold text-[#1b120b] hover:bg-amber-500"
|
|
>
|
|
{t('register')}
|
|
</Link>
|
|
</>
|
|
)}
|
|
<LanguageSwitcher />
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|