Update TypeScript build information.
This commit is contained in:
@@ -9,6 +9,12 @@ import { useTheme } from '@/context/ThemeContext';
|
||||
import { getImageUrl } from '@/lib/api';
|
||||
import Image from 'next/image';
|
||||
|
||||
// Clase base para TODOS los links de nav — idéntica para todos
|
||||
const NAV_LINK = "flex items-center gap-2 text-sm font-bold uppercase tracking-wide transition-colors text-slate-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400";
|
||||
|
||||
// Admin variant — mismo tamaño pero con acento añil
|
||||
const NAV_LINK_ADMIN = "flex items-center gap-2 text-sm font-bold uppercase tracking-wide transition-colors text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300";
|
||||
|
||||
export function Navbar() {
|
||||
const { t, language, setLanguage } = useTranslation();
|
||||
const { user, logout } = useAuth();
|
||||
@@ -20,6 +26,8 @@ export function Navbar() {
|
||||
return (
|
||||
<nav className="fixed top-0 w-full z-50 glass border-b border-black/5 dark:border-white/10 bg-gray-50/70 dark:bg-black/40 backdrop-blur-xl">
|
||||
<div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
|
||||
|
||||
{/* Logo */}
|
||||
<Link href="/" className="flex items-center gap-2 md:gap-4 group" aria-label={`${platformName} Studio - Dashboard`}>
|
||||
<div className={`rounded-lg md:rounded-xl bg-blue-600 flex items-center justify-center font-black text-white shadow-lg shadow-blue-500/20 group-hover:scale-105 transition-all overflow-hidden relative border border-white/5 ${branding?.logo_variant === 'wide' ? 'w-32 h-8 md:w-48 md:h-10 px-2 bg-white' : 'w-8 h-8 md:w-10 md:h-10'}`}>
|
||||
{branding?.logo_url ? (
|
||||
@@ -35,88 +43,71 @@ export function Navbar() {
|
||||
<span className="font-black text-sm md:text-lg tracking-tighter text-gray-900 dark:text-white leading-none">
|
||||
{platformName.toUpperCase()}
|
||||
</span>
|
||||
<span className="text-[8px] md:text-[10px] font-black tracking-widest text-blue-600 dark:text-blue-500 uppercase">STUDIO</span>
|
||||
<span className="text-[10px] font-black tracking-widest text-blue-600 dark:text-blue-500 uppercase">STUDIO</span>
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
|
||||
{/* Primary Navigation */}
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link
|
||||
href="/"
|
||||
className="nav-link-standard text-slate-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
|
||||
>
|
||||
<LayoutDashboard className="w-4 h-4" />
|
||||
<div className="flex items-center gap-5">
|
||||
|
||||
<Link href="/" className={NAV_LINK}>
|
||||
<LayoutDashboard className="w-4 h-4 shrink-0" />
|
||||
{t('nav.courses')}
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/library/assets"
|
||||
className="nav-link-standard text-slate-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
|
||||
>
|
||||
<Library className="w-4 h-4" aria-hidden="true" />
|
||||
<Link href="/library/assets" className={NAV_LINK}>
|
||||
<Library className="w-4 h-4 shrink-0" aria-hidden="true" />
|
||||
{t('nav.library') || 'Library'}
|
||||
</Link>
|
||||
|
||||
|
||||
{user?.role === 'admin' && (
|
||||
<>
|
||||
{user.organization_id === '00000000-0000-0000-0000-000000000001' && (
|
||||
<Link
|
||||
href="/admin"
|
||||
className="text-sm font-black text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-2 bg-indigo-500/10 px-3 py-1.5 rounded-lg border border-indigo-500/20 shadow-glow-sm uppercase tracking-wider"
|
||||
>
|
||||
<ShieldCheck className="w-4 h-4" aria-hidden="true" />
|
||||
<Link href="/admin" className={NAV_LINK_ADMIN}>
|
||||
<ShieldCheck className="w-4 h-4 shrink-0" aria-hidden="true" />
|
||||
{t('nav.globalControl')}
|
||||
</Link>
|
||||
)}
|
||||
<Link
|
||||
href="/settings/webhooks"
|
||||
className="nav-link-standard text-slate-600 dark:text-gray-400 hover:text-blue-400"
|
||||
>
|
||||
<Webhook className="w-4 h-4" />
|
||||
<Link href="/settings/webhooks" className={NAV_LINK}>
|
||||
<Webhook className="w-4 h-4 shrink-0" />
|
||||
{t('nav.webhooks')}
|
||||
</Link>
|
||||
<Link
|
||||
href="/profile"
|
||||
className="nav-link-standard text-slate-600 dark:text-gray-400 hover:text-blue-400"
|
||||
>
|
||||
<Settings className="w-4 h-4" />
|
||||
<Link href="/profile" className={NAV_LINK}>
|
||||
<Settings className="w-4 h-4 shrink-0" />
|
||||
{t('nav.profile')}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Link
|
||||
href="/settings"
|
||||
className="nav-link-standard text-slate-600 dark:text-gray-400 hover:text-blue-400"
|
||||
>
|
||||
<Settings className="w-4 h-4" />
|
||||
Settings
|
||||
<Link href="/settings" className={NAV_LINK}>
|
||||
<Settings className="w-4 h-4 shrink-0" />
|
||||
{t('nav.settings') || 'Settings'}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="h-6 w-px bg-white/10 mx-2" />
|
||||
<div className="h-6 w-px bg-black/10 dark:bg-white/10 mx-1" />
|
||||
|
||||
{/* Theme Toggle */}
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="p-2 hover:bg-white/5 rounded-lg text-gray-400 hover:text-white transition-all"
|
||||
title={theme === 'dark' ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
|
||||
aria-label={theme === 'dark' ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
|
||||
className="p-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg text-slate-500 hover:text-slate-900 dark:text-gray-400 dark:hover:text-white transition-all"
|
||||
title={theme === 'dark' ? 'Cambiar a Modo Claro' : 'Cambiar a Modo Oscuro'}
|
||||
aria-label={theme === 'dark' ? 'Cambiar a Modo Claro' : 'Cambiar a Modo Oscuro'}
|
||||
>
|
||||
{theme === 'dark' ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
|
||||
</button>
|
||||
|
||||
<div className="h-6 w-px bg-white/10 mx-2" />
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Language */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Globe className="w-4 h-4 text-gray-500" aria-hidden="true" />
|
||||
<select
|
||||
id="studio-language-selector"
|
||||
value={language}
|
||||
onChange={(e) => setLanguage(e.target.value)}
|
||||
aria-label={t('nav.selectLanguage') || 'Select Language'}
|
||||
className="bg-transparent text-[10px] font-black uppercase tracking-widest text-gray-400 hover:text-white transition-colors focus:outline-none cursor-pointer"
|
||||
className="bg-transparent text-xs font-bold uppercase tracking-widest text-slate-600 dark:text-gray-400 hover:text-slate-900 dark:hover:text-white transition-colors focus:outline-none cursor-pointer"
|
||||
>
|
||||
<option value="en" className="bg-white dark:bg-gray-900">EN</option>
|
||||
<option value="es" className="bg-white dark:bg-gray-900">ES</option>
|
||||
@@ -124,17 +115,18 @@ export function Navbar() {
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="h-6 w-px bg-white/10 mx-2" />
|
||||
<div className="h-6 w-px bg-black/10 dark:bg-white/10 mx-1" />
|
||||
|
||||
{/* User info */}
|
||||
{user ? (
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-xs font-medium text-gray-900 dark:text-white">{user.full_name}</span>
|
||||
<span className="text-[10px] text-gray-500 uppercase tracking-wider">{user.role}</span>
|
||||
<span className="text-sm font-bold text-gray-900 dark:text-white leading-tight">{user.full_name}</span>
|
||||
<span className="text-xs text-slate-500 dark:text-gray-500 uppercase tracking-widest font-bold">{user.role}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={logout}
|
||||
className="p-2 hover:bg-red-500/10 hover:text-red-600 dark:hover:text-red-400 rounded-lg transition-all text-gray-500"
|
||||
className="p-2 hover:bg-red-500/10 hover:text-red-600 dark:hover:text-red-400 rounded-lg transition-all text-gray-400"
|
||||
title={t('nav.signOut') || "Sign Out"}
|
||||
aria-label={t('nav.signOut') || "Sign Out"}
|
||||
>
|
||||
@@ -142,10 +134,7 @@ export function Navbar() {
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<Link
|
||||
href="/auth/login"
|
||||
className="text-sm font-medium text-blue-400 hover:text-blue-300 transition-colors"
|
||||
>
|
||||
<Link href="/auth/login" className="text-sm font-bold text-blue-600 hover:text-blue-500 transition-colors">
|
||||
Sign In
|
||||
</Link>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user