refactor: apply nav-link-standard utility class to standardize navigation link styling across components.

This commit is contained in:
2026-03-02 11:37:31 -03:00
parent 81e1830563
commit 9abe631782
3 changed files with 16 additions and 10 deletions
+4
View File
@@ -55,6 +55,10 @@ body {
@apply glass rounded-2xl p-4 md:p-6 transition-all duration-300;
}
.nav-link-standard {
@apply text-xs font-bold uppercase tracking-widest transition-colors flex items-center gap-2;
}
.glass-card:hover {
@apply border-white/20 bg-white/5;
}
+5 -4
View File
@@ -46,17 +46,18 @@ export default function AppHeader() {
<div className="flex items-center gap-4">
<nav className="hidden md:flex items-center gap-8 mr-4" aria-label="Navegación principal">
<Link href="/" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">
<Link href="/" className="nav-link-standard text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">
{t('nav.catalog')}
</Link>
<Link href="/my-learning" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">
<Link href="/my-learning" className="nav-link-standard text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">
{t('nav.myLearning')}
</Link>
<Link href="/bookmarks" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">
<Link href="/bookmarks" className="nav-link-standard text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">
{t('nav.bookmarks')}
</Link>
{user && (
<Link href={`/profile/${user.id}`} className="text-[10px] font-black uppercase tracking-[0.2em] text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors">
<Link href={`/profile/${user.id}`} className="nav-link-standard text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300">
MI PORTAFOLIO
</Link>
)}