Layout visual: cabecera con nav/sesión/idioma + pie, tema Tailwind

- 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>
2026-07-12 22:57:00 +00:00
parent f332fc39ca
commit 4a783d165f
8 changed files with 113 additions and 10 deletions
@@ -1,28 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { useTranslations } from 'next-intl'
-import { useRouter } from '@/i18n/navigation'
-
-export function LogoutButton() {
-  const t = useTranslations('Account')
-  const router = useRouter()
-  const [busy, setBusy] = useState(false)
-
-  async function logout() {
-    setBusy(true)
-    await fetch('/api/auth/logout', { method: 'POST', credentials: 'same-origin' })
-    router.push('/')
-    router.refresh()
-  }
-
-  return (
-    <button
-      onClick={logout}
-      disabled={busy}
-      className="rounded border border-amber-900/60 px-4 py-2 text-amber-200 disabled:opacity-60"
-    >
-      {t('logout')}
-    </button>
-  )
-}
@@ -1,7 +1,7 @@
 import { getTranslations, setRequestLocale } from 'next-intl/server'
 import { redirect } from '@/i18n/navigation'
 import { getSession } from '@/lib/session'
-import { LogoutButton } from './LogoutButton'
+import { LogoutButton } from '@/components/LogoutButton'

 export const dynamic = 'force-dynamic'

@@ -3,6 +3,8 @@ import { notFound } from 'next/navigation'
 import { NextIntlClientProvider, hasLocale } from 'next-intl'
 import { getTranslations, setRequestLocale } from 'next-intl/server'
 import { routing } from '@/i18n/routing'
+import { Header } from '@/components/Header'
+import { Footer } from '@/components/Footer'
 import '../globals.css'

 export function generateStaticParams() {
@@ -44,8 +46,12 @@ export default async function LocaleLayout({

  return (
    <html lang={locale}>
-      <body>
-        <NextIntlClientProvider>{children}</NextIntlClientProvider>
+      <body className="flex min-h-screen flex-col">
+        <NextIntlClientProvider>
+          <Header />
+          <div className="flex-1">{children}</div>
+          <Footer />
+        </NextIntlClientProvider>
      </body>
    </html>
  )