web-next: migrar toda la UI al tema real nw-ryu
Reescritura completa del frontend Next.js del sistema visual Tailwind "simulado" al tema Django original (nw-ryu), para paridad pixel con la web actual antes del cutover. - Tema real: copia de static/nw-themes/nw-ryu + favicons a public/, el layout carga el novavow-style.css real de ultimo (gana la cascada sobre Tailwind) + Font Awesome. - Shell replicando los partials Django: SiteHeader, Video, Social, Footer, ServerClock; home con estructura real (main-page/middle-content/...). - Helpers reutilizables: PageShell (main-page > middle-content > body-content > title-content) y ServiceBox (title-box-content + back-to-account). - Paginas migradas a clases reales del tema (fieldset/tool-button/char-box/ item-box/info-box-light/max-center-table/alert-message/botones reales), eliminando el markup Tailwind (.nw-btn/.nw-card/.nw-input): auth (login/register/recover/reset/select-account/activate), cuenta + servicios de personaje (revive/unstuck/rename/customize/ change-race/change-faction/level-up/gold/transfer + pago Stripe), ajustes (change-password/change-email/security-token), comunidad (vote-points/recruit/battlepay), foro completo, y admin (indice + 7 secciones + los Admin*Manager). - Se conserva el bilingue (next-intl); claves nuevas en messages/es|en.json. Verificado: typecheck + build OK; rutas protegidas 307->login; sin MISSING_MESSAGE; cero Tailwind residual (solo .nw-tool-btn/.nw-page, clases propias en globals.css). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,164 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { Link } from '@/i18n/navigation'
|
||||
import { useRouter } from '@/i18n/navigation'
|
||||
|
||||
const SERVER_NAME = 'NovaWoW'
|
||||
|
||||
/**
|
||||
* Cabecera / barra de navegación — réplica EXACTA del partial Django
|
||||
* `home/templates/partials/header.html` con las clases del tema real
|
||||
* (nav-wrapper, nav-bar, nav-dropdown...). Los enlaces internos que ya
|
||||
* existen en web-next usan <Link> (next-intl); el resto se mantiene igual
|
||||
* que en Django. El toggle móvil replica `nwNavBar()` de nw-scripts.js.
|
||||
*/
|
||||
export function SiteHeader({
|
||||
loggedIn,
|
||||
accountLabel,
|
||||
}: {
|
||||
loggedIn: boolean
|
||||
accountLabel: string
|
||||
}) {
|
||||
const router = useRouter()
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
async function logout(e: React.MouseEvent) {
|
||||
e.preventDefault()
|
||||
await fetch('/api/auth/logout', { method: 'POST', credentials: 'same-origin' })
|
||||
router.push('/')
|
||||
router.refresh()
|
||||
}
|
||||
|
||||
return (
|
||||
<header>
|
||||
<div className="nav-wrapper">
|
||||
<div className={open ? 'nav-bar responsive' : 'nav-bar'} id="nw-nav-bar">
|
||||
<a
|
||||
href="javascript:void(0);"
|
||||
className={open ? 'icon change' : 'icon'}
|
||||
id="menu-icon"
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
setOpen((v) => !v)
|
||||
}}
|
||||
>
|
||||
<div className="bar1"></div>
|
||||
<div className="bar2"></div>
|
||||
<div className="bar3"></div>
|
||||
</a>
|
||||
|
||||
{loggedIn ? (
|
||||
<Link href="/">INICIO</Link>
|
||||
) : (
|
||||
<Link href="/register">CREAR CUENTA</Link>
|
||||
)}
|
||||
|
||||
<div className="nav-dropdown">
|
||||
<div className="nav-dropdown-btn">
|
||||
DESCARGAS <i className="fas fa-caret-down"></i>
|
||||
</div>
|
||||
<div className="nav-dropdown-content">
|
||||
<p>
|
||||
<a href="/download-client">CLIENTE</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="/download-addons">ADDONS</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="nav-dropdown">
|
||||
<div className="nav-dropdown-btn">
|
||||
{SERVER_NAME} <i className="fas fa-caret-down"></i>
|
||||
</div>
|
||||
<div className="nav-dropdown-content">
|
||||
<p>
|
||||
<a
|
||||
href="https://foro.novawow.com/topic/26596-changelog-2024/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
CHANGELOG
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="/novawow-realm">REINO</a>
|
||||
</p>
|
||||
{loggedIn && (
|
||||
<p>
|
||||
<a href="/novawow-players">JUGADORES</a>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="nav-dropdown">
|
||||
<div className="nav-dropdown-btn">
|
||||
COMUNIDAD <i className="fas fa-caret-down"></i>
|
||||
</div>
|
||||
<div className="nav-dropdown-content">
|
||||
<p>
|
||||
<Link href="/forum">FOROS</Link>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://wotlk.novawow.com" target="_blank" rel="noopener noreferrer">
|
||||
WOTLK DB
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="/content-creators">VIDEOS</a>
|
||||
</p>
|
||||
{loggedIn && (
|
||||
<p>
|
||||
<a href="/help">AYUDA</a>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loggedIn ? (
|
||||
<div className="nav-dropdown">
|
||||
<div className="nav-dropdown-btn">
|
||||
{accountLabel} <i className="fas fa-caret-down"></i>
|
||||
</div>
|
||||
<div className="nav-dropdown-content">
|
||||
<p>
|
||||
<Link href="/account">MI CUENTA</Link>
|
||||
</p>
|
||||
<p>
|
||||
<a href="javascript:void(0);" onClick={logout}>
|
||||
DESCONECTAR
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Link href="/login" className="last">
|
||||
CONECTAR
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* eslint-disable @next/next/no-img-element */}
|
||||
<a href="/">
|
||||
<img
|
||||
className="nw-long-logo"
|
||||
src="/nw-themes/nw-ryu/nw-images/nw-logos/nw-long-logo.webp"
|
||||
alt={SERVER_NAME}
|
||||
title={SERVER_NAME}
|
||||
/>
|
||||
</a>
|
||||
<a href="javascript:void(0);">
|
||||
<img
|
||||
className="nw-logo"
|
||||
src="/nw-themes/nw-ryu/nw-images/nw-logos/nw-logo.webp"
|
||||
alt="NW"
|
||||
title="NW"
|
||||
/>
|
||||
</a>
|
||||
{/* eslint-enable @next/next/no-img-element */}
|
||||
</header>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user