UI: estilar enlaces del índice de admin y del panel de servicios de la cuenta
Se veían como enlaces azules sin estilo. Ahora: - /admin: rejilla de tarjetas (icono + etiqueta + flecha) con hover dorado. - /account (servicios): chips con borde, fondo de panel y hover dorado en vez de enlaces subrayados azules. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -147,15 +147,18 @@ function ServicesPanel({ t }: { t: (k: string) => string }) {
|
|||||||
{groups.map((g) => (
|
{groups.map((g) => (
|
||||||
<section key={g.title} className="nw-card">
|
<section key={g.title} className="nw-card">
|
||||||
<h2 className="mb-3 text-lg font-semibold text-nw-gold-light">{g.title}</h2>
|
<h2 className="mb-3 text-lg font-semibold text-nw-gold-light">{g.title}</h2>
|
||||||
<ul className="space-y-1.5 text-sm">
|
<div className="flex flex-col gap-2">
|
||||||
{g.items.map((it) => (
|
{g.items.map((it) => (
|
||||||
<li key={it.href}>
|
<Link
|
||||||
<Link href={it.href} className="text-sky-400 hover:text-amber-300 hover:underline">
|
key={it.href}
|
||||||
{it.label}
|
href={it.href}
|
||||||
|
className="flex items-center justify-between gap-2 rounded-lg border border-nw-border/60 bg-nw-panel-2/40 px-3 py-2 text-sm text-nw-text transition hover:border-nw-gold/60 hover:bg-nw-panel-2/80 hover:text-nw-gold-light"
|
||||||
|
>
|
||||||
|
<span>{it.label}</span>
|
||||||
|
<span className="text-nw-muted" aria-hidden>→</span>
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
|
||||||
))}
|
))}
|
||||||
</ul>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -13,41 +13,31 @@ export default async function AdminPage({ params }: { params: Promise<{ locale:
|
|||||||
if (!session.bnetId) redirect({ href: '/login', locale })
|
if (!session.bnetId) redirect({ href: '/login', locale })
|
||||||
if (!(await isAdmin(session))) redirect({ href: '/', locale })
|
if (!(await isAdmin(session))) redirect({ href: '/', locale })
|
||||||
|
|
||||||
|
const items: { href: string; label: string; icon: string }[] = [
|
||||||
|
{ href: '/admin/news', label: t('manageNews'), icon: '📰' },
|
||||||
|
{ href: '/admin/prices', label: t('managePrices'), icon: '💲' },
|
||||||
|
{ href: '/admin/votes', label: t('manageVotes'), icon: '🗳️' },
|
||||||
|
{ href: '/admin/gold', label: t('manageGold'), icon: '🪙' },
|
||||||
|
{ href: '/admin/users', label: t('manageUsers'), icon: '👤' },
|
||||||
|
{ href: '/admin/recruit', label: t('manageRecruit'), icon: '🎁' },
|
||||||
|
]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="mx-auto max-w-3xl px-4 py-8">
|
<main className="mx-auto max-w-3xl px-4 py-8">
|
||||||
<h1 className="mb-6 text-2xl font-bold text-amber-500">{t('title')}</h1>
|
<h1 className="mb-6 text-2xl font-bold text-amber-500">{t('title')}</h1>
|
||||||
<ul className="space-y-2">
|
<div className="grid gap-3 sm:grid-cols-2">
|
||||||
<li>
|
{items.map((it) => (
|
||||||
<Link href="/admin/news" className="text-sky-400 hover:underline">
|
<Link
|
||||||
{t('manageNews')}
|
key={it.href}
|
||||||
|
href={it.href}
|
||||||
|
className="flex items-center gap-3 rounded-xl border border-nw-border/70 bg-nw-panel/80 p-4 shadow-lg shadow-black/30 backdrop-blur transition hover:border-nw-gold/60 hover:bg-nw-panel-2/70"
|
||||||
|
>
|
||||||
|
<span className="text-2xl" aria-hidden>{it.icon}</span>
|
||||||
|
<span className="font-semibold text-nw-text">{it.label}</span>
|
||||||
|
<span className="ml-auto text-nw-gold-light" aria-hidden>→</span>
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
))}
|
||||||
<li>
|
</div>
|
||||||
<Link href="/admin/prices" className="text-sky-400 hover:underline">
|
|
||||||
{t('managePrices')}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link href="/admin/votes" className="text-sky-400 hover:underline">
|
|
||||||
{t('manageVotes')}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link href="/admin/gold" className="text-sky-400 hover:underline">
|
|
||||||
{t('manageGold')}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link href="/admin/users" className="text-sky-400 hover:underline">
|
|
||||||
{t('manageUsers')}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link href="/admin/recruit" className="text-sky-400 hover:underline">
|
|
||||||
{t('manageRecruit')}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</main>
|
</main>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user