fix: footer movil con botones de comunidad visibles (Discord/Patreon/X/RSS con iconos)

This commit is contained in:
Renato
2026-08-05 07:24:58 +08:00
parent c50deadee8
commit 9fd9e09fd5
+27 -23
View File
@@ -1,5 +1,5 @@
import Link from "next/link"
import { Image, Search, Rss } from "lucide-react"
import { Image, Search, Rss, X, MessageCircle, Heart } from "lucide-react"
import { SITE_NAME, SITE_TAGLINE, SITE_LINKS } from "@/lib/site"
import { AgeGate } from "@/components/age-gate"
import { FanSubSidebar } from "@/components/fansub-sidebar"
@@ -39,56 +39,60 @@ export default function PublicLayout({ children }: { children: React.ReactNode }
</div>
</main>
<footer className="border-t border-[var(--border)] py-6 text-center text-xs text-[var(--muted)] mb-12 sm:mb-0">
<div className="mx-auto max-w-5xl px-3 flex flex-col items-center gap-3">
<p>
<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">
<p className="text-xs text-[var(--muted)]">
{SITE_NAME} &middot; {SITE_TAGLINE}
</p>
<div className="flex items-center gap-4">
<a
href="/rss.xml"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1.5 text-[var(--muted)] hover:text-[var(--accent)] transition-colors"
title="RSS feed"
>
<Rss className="h-3.5 w-3.5" />
RSS
</a>
<span className="text-[var(--border)]">|</span>
{/* 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="text-[var(--muted)] hover:text-[var(--accent)] transition-colors"
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>
<span className="text-[var(--border)]">|</span>
</>
)}
<a
href={SITE_LINKS.discord}
target={SITE_LINKS.discord.startsWith("http") ? "_blank" : undefined}
rel="noopener noreferrer"
className="text-[var(--muted)] hover:text-[var(--accent)] transition-colors"
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>
<span className="text-[var(--border)]">|</span>
<a
href={SITE_LINKS.patreon}
target={SITE_LINKS.patreon.startsWith("http") ? "_blank" : undefined}
rel="noopener noreferrer"
className="text-[var(--muted)] hover:text-[var(--accent)] transition-colors"
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>
</div>
</footer>
</>