design: botones de comunidad al header (siempre visibles, arriba) + footer simplificado
This commit is contained in:
+49
-49
@@ -19,14 +19,58 @@ export default function PublicLayout({ children }: { children: React.ReactNode }
|
|||||||
</div>
|
</div>
|
||||||
<span className="text-sm font-bold tracking-tight">{SITE_NAME}</span>
|
<span className="text-sm font-bold tracking-tight">{SITE_NAME}</span>
|
||||||
</Link>
|
</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
|
<Link
|
||||||
href="/buscar"
|
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"
|
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" />
|
<Search className="h-4 w-4" />
|
||||||
<span className="hidden sm:inline">Buscar</span>
|
<span className="hidden sm:inline">Buscar</span>
|
||||||
</Link>
|
</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>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
@@ -39,57 +83,13 @@ export default function PublicLayout({ children }: { children: React.ReactNode }
|
|||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer className="border-t border-[var(--border)] pt-8 pb-24 sm:pb-8">
|
{/* Footer simplificado: los botones de comunidad viven en el header
|
||||||
<div className="mx-auto max-w-5xl px-3 flex flex-col items-center gap-5">
|
(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)]">
|
<p className="text-xs text-[var(--muted)]">
|
||||||
{SITE_NAME} · {SITE_TAGLINE}
|
{SITE_NAME} · {SITE_TAGLINE}
|
||||||
</p>
|
</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">
|
<p className="text-[10px] text-[var(--muted)] opacity-60">
|
||||||
Contenido para mayores de 18 años · Todos los derechos de las obras pertenecen a sus autores
|
Contenido para mayores de 18 años · Todos los derechos de las obras pertenecen a sus autores
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
Reference in New Issue
Block a user