design: botones de comunidad al header (siempre visibles, arriba) + footer simplificado

This commit is contained in:
Renato
2026-08-05 07:37:34 +08:00
parent 9fd9e09fd5
commit 77ce869ed9
+49 -49
View File
@@ -19,14 +19,58 @@ export default function PublicLayout({ children }: { children: React.ReactNode }
</div>
<span className="text-sm font-bold tracking-tight">{SITE_NAME}</span>
</Link>
<nav className="flex items-center gap-2 sm:gap-4">
{/* Lupa + botones de comunidad (siempre visibles, arriba de todo) */}
<nav className="flex items-center gap-1 sm:gap-1.5">
<Link
href="/buscar"
className="flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs text-[var(--muted)] hover:bg-[var(--surface)] hover:text-[var(--foreground)] transition-colors"
title="Buscar"
>
<Search className="h-4 w-4" />
<span className="hidden sm:inline">Buscar</span>
</Link>
<span className="mx-1 hidden h-4 w-px bg-[var(--border)] sm:block" />
{SITE_LINKS.twitter && (
<a
href={SITE_LINKS.twitter}
target="_blank"
rel="noopener noreferrer"
className="flex h-8 w-8 items-center justify-center rounded-full text-[var(--muted)] transition-colors hover:bg-[var(--surface)] hover:text-[var(--accent)]"
title="X / Twitter"
>
<X className="h-4 w-4" />
</a>
)}
<a
href={SITE_LINKS.discord}
target={SITE_LINKS.discord.startsWith("http") ? "_blank" : undefined}
rel="noopener noreferrer"
className="flex h-8 w-8 items-center justify-center rounded-full text-[var(--muted)] transition-colors hover:bg-[var(--surface)] hover:text-[#5865F2]"
title={SITE_LINKS.discord === "#" ? "Discord (próximamente)" : "Discord"}
>
<MessageCircle className="h-4 w-4" />
</a>
<a
href={SITE_LINKS.patreon}
target={SITE_LINKS.patreon.startsWith("http") ? "_blank" : undefined}
rel="noopener noreferrer"
className="flex h-8 w-8 items-center justify-center rounded-full text-[var(--muted)] transition-colors hover:bg-[var(--surface)] hover:text-[#FF424D]"
title={SITE_LINKS.patreon === "#" ? "Patreon (próximamente)" : "Patreon"}
>
<Heart className="h-4 w-4" />
</a>
<a
href="/rss.xml"
target="_blank"
rel="noopener noreferrer"
className="flex h-8 w-8 items-center justify-center rounded-full text-[var(--muted)] transition-colors hover:bg-[var(--surface)] hover:text-[#f97316]"
title="RSS feed"
>
<Rss className="h-4 w-4" />
</a>
</nav>
</div>
</header>
@@ -39,57 +83,13 @@ export default function PublicLayout({ children }: { children: React.ReactNode }
</div>
</main>
<footer className="border-t border-[var(--border)] pt-8 pb-24 sm:pb-8">
<div className="mx-auto max-w-5xl px-3 flex flex-col items-center gap-5">
{/* Footer simplificado: los botones de comunidad viven en el header
(siempre visibles); acá solo marca + aviso legal */}
<footer className="border-t border-[var(--border)] py-6 pb-16 sm:pb-6">
<div className="mx-auto max-w-5xl px-3 flex flex-col items-center gap-3">
<p className="text-xs text-[var(--muted)]">
{SITE_NAME} &middot; {SITE_TAGLINE}
</p>
{/* Botones de comunidad: visibles y táctiles en móvil */}
<div className="flex flex-wrap items-center justify-center gap-2.5 w-full max-w-md">
{SITE_LINKS.twitter && (
<a
href={SITE_LINKS.twitter}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 rounded-full border border-[var(--border)] bg-[var(--surface)] px-4 py-2 text-xs font-medium text-[var(--foreground)] transition-colors hover:border-[var(--accent)] hover:text-[var(--accent)]"
>
<X className="h-3.5 w-3.5" />
X / Twitter
</a>
)}
<a
href={SITE_LINKS.discord}
target={SITE_LINKS.discord.startsWith("http") ? "_blank" : undefined}
rel="noopener noreferrer"
className="inline-flex items-center gap-2 rounded-full border border-[var(--border)] bg-[var(--surface)] px-4 py-2 text-xs font-medium text-[var(--foreground)] transition-colors hover:border-[#5865F2] hover:text-[#5865F2]"
title={SITE_LINKS.discord === "#" ? "Discord (próximamente)" : "Discord"}
>
<MessageCircle className="h-3.5 w-3.5" />
Discord
</a>
<a
href={SITE_LINKS.patreon}
target={SITE_LINKS.patreon.startsWith("http") ? "_blank" : undefined}
rel="noopener noreferrer"
className="inline-flex items-center gap-2 rounded-full border border-[var(--border)] bg-[var(--surface)] px-4 py-2 text-xs font-medium text-[var(--foreground)] transition-colors hover:border-[#FF424D] hover:text-[#FF424D]"
title={SITE_LINKS.patreon === "#" ? "Patreon (próximamente)" : "Patreon"}
>
<Heart className="h-3.5 w-3.5" />
Patreon
</a>
<a
href="/rss.xml"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 rounded-full border border-[var(--border)] bg-[var(--surface)] px-4 py-2 text-xs font-medium text-[var(--foreground)] transition-colors hover:border-[#f97316] hover:text-[#f97316]"
title="RSS feed"
>
<Rss className="h-3.5 w-3.5" />
RSS
</a>
</div>
<p className="text-[10px] text-[var(--muted)] opacity-60">
Contenido para mayores de 18 años &middot; Todos los derechos de las obras pertenecen a sus autores
</p>