76 lines
4.0 KiB
TypeScript
76 lines
4.0 KiB
TypeScript
'use client';
|
|
|
|
import Link from "next/link";
|
|
import { useBranding } from "@/context/BrandingContext";
|
|
import { useAuth } from "@/context/AuthContext";
|
|
import { useTranslation } from "@/context/I18nContext";
|
|
import { LogOut, Globe } from "lucide-react";
|
|
import NotificationCenter from "./NotificationCenter";
|
|
|
|
export default function AppHeader() {
|
|
const { t, language, setLanguage } = useTranslation();
|
|
const { branding } = useBranding();
|
|
const { user, logout } = useAuth();
|
|
|
|
return (
|
|
<header className="h-16 glass sticky top-0 z-50 px-6 flex items-center justify-between backdrop-blur-xl bg-black/40 border-b border-white/5">
|
|
<Link href="/" className="flex items-center gap-3 group">
|
|
<div className="w-10 h-10 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">
|
|
{branding?.logo_url ? (
|
|
<img src={branding.logo_url} alt={branding.name} className="w-full h-full object-contain" />
|
|
) : (
|
|
<div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-blue-500 to-blue-700">L</div>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-col -gap-1">
|
|
<span className="font-black text-lg tracking-tighter text-white leading-none">
|
|
{branding?.name?.toUpperCase() || 'APRENDER'}
|
|
</span>
|
|
{!branding && <span className="text-[10px] font-black tracking-widest text-blue-500 uppercase">EXPERIENCIA</span>}
|
|
</div>
|
|
</Link>
|
|
|
|
<nav className="flex items-center gap-2 md:gap-8">
|
|
<div className="hidden md:flex items-center gap-8 mr-4">
|
|
<Link href="/" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 hover:text-white transition-colors">
|
|
{t('nav.catalog')}
|
|
</Link>
|
|
<Link href="/my-learning" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 hover:text-white transition-colors">
|
|
{t('nav.myLearning')}
|
|
</Link>
|
|
</div>
|
|
|
|
<NotificationCenter />
|
|
|
|
<div className="flex items-center gap-2 border-l border-white/10 pl-4">
|
|
<Globe size={14} className="text-gray-500" />
|
|
<select
|
|
value={language}
|
|
onChange={(e) => setLanguage(e.target.value)}
|
|
className="bg-transparent text-[10px] font-black uppercase tracking-widest text-gray-500 hover:text-white transition-colors focus:outline-none cursor-pointer"
|
|
>
|
|
<option value="en" className="bg-[#0f1115]">EN</option>
|
|
<option value="es" className="bg-[#0f1115]">ES</option>
|
|
<option value="pt" className="bg-[#0f1115]">PT</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 md:gap-4 pl-4 border-l border-white/10">
|
|
<Link href="/profile" className="flex items-center gap-2 group/profile">
|
|
<div className="w-8 h-8 rounded-full bg-white/5 border border-white/10 flex items-center justify-center font-bold text-xs text-blue-400 group-hover/profile:border-blue-500/50 transition-colors">
|
|
{user?.full_name?.charAt(0) || 'U'}
|
|
</div>
|
|
</Link>
|
|
<button
|
|
onClick={logout}
|
|
className="p-2 hover:bg-red-500/10 rounded-full text-gray-400 hover:text-red-400 transition-colors"
|
|
title={t('nav.signOut')}
|
|
>
|
|
<LogOut size={16} />
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
);
|
|
}
|