Inna
c9ba6c35e3
- globals.css: tokens @theme (nw-bg/panel/border/gold/text/muted), fondo con degradado + brillo radial, y componentes reutilizables (.nw-btn, .nw-btn-ghost, .nw-card, .nw-heading con oro degradado). - Header: sticky con backdrop-blur y marca en oro degradado. - Home: sección hero (nombre del server + tagline + CTAs Crear cuenta / Foros) y estado del servidor + noticias en tarjetas (nw-card). Textos hero en catálogos. Verificado: build OK, home renderiza el hero/tarjetas, los tokens nw compilan en el CSS. Sistema visual base listo para aplicar al resto de páginas. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
54 lines
1.8 KiB
TypeScript
54 lines
1.8 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="sticky top-0 z-50 border-b border-nw-border/60 bg-nw-bg/80 backdrop-blur supports-[backdrop-filter]:bg-nw-bg/60">
|
|
<div className="mx-auto flex max-w-5xl items-center justify-between gap-4 px-4 py-3">
|
|
<Link href="/" className="nw-heading text-xl">
|
|
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>
|
|
<Link href="/forum" className="text-amber-200 hover:text-amber-400">
|
|
{t('forum')}
|
|
</Link>
|
|
<Link href="/vote-points" className="text-amber-200 hover:text-amber-400">
|
|
{t('vote')}
|
|
</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>
|
|
)
|
|
}
|