113 lines
5.5 KiB
TypeScript
113 lines
5.5 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { useAuth } from '@/context/AuthContext';
|
|
import { useTranslation } from '@/context/I18nContext';
|
|
import { LayoutDashboard, ShieldCheck, LogOut, Webhook, Settings, Globe } from 'lucide-react';
|
|
|
|
export function Navbar() {
|
|
const { t, language, setLanguage } = useTranslation();
|
|
const { user, logout } = useAuth();
|
|
|
|
return (
|
|
<nav className="fixed top-0 w-full z-50 glass border-b border-white/10 bg-black/20">
|
|
<div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
|
|
<Link href="/" className="flex items-center gap-2">
|
|
<h1 className="text-xl font-bold tracking-tight">
|
|
Open<span className="gradient-text">CCB</span> Studio
|
|
</h1>
|
|
</Link>
|
|
|
|
<div className="flex items-center gap-6">
|
|
<div className="flex items-center gap-4">
|
|
<Link
|
|
href="/"
|
|
className="text-sm font-medium text-gray-400 hover:text-blue-400 transition-colors flex items-center gap-2"
|
|
>
|
|
<LayoutDashboard className="w-4 h-4" />
|
|
{t('nav.courses')}
|
|
</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"
|
|
>
|
|
<ShieldCheck className="w-4 h-4" />
|
|
{t('nav.globalControl')}
|
|
</Link>
|
|
)}
|
|
<Link
|
|
href="/settings/webhooks"
|
|
className="text-sm font-medium text-gray-400 hover:text-blue-400 transition-colors flex items-center gap-2"
|
|
>
|
|
<Webhook className="w-4 h-4" />
|
|
{t('nav.webhooks')}
|
|
</Link>
|
|
<Link
|
|
href="/profile"
|
|
className="text-sm font-medium text-gray-400 hover:text-blue-400 transition-colors flex items-center gap-2"
|
|
>
|
|
<Settings className="w-4 h-4" />
|
|
{t('nav.profile')}
|
|
</Link>
|
|
</>
|
|
)}
|
|
|
|
<Link
|
|
href="/settings"
|
|
className="text-sm font-medium text-gray-400 hover:text-blue-400 transition-colors flex items-center gap-2"
|
|
>
|
|
<Settings className="w-4 h-4" />
|
|
Settings
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="h-6 w-px bg-white/10 mx-2" />
|
|
|
|
{/* Language Switcher */}
|
|
<div className="flex items-center gap-2">
|
|
<Globe className="w-4 h-4 text-gray-500" />
|
|
<select
|
|
value={language}
|
|
onChange={(e) => setLanguage(e.target.value)}
|
|
className="bg-transparent text-[10px] font-black uppercase tracking-widest text-gray-400 hover:text-white transition-colors focus:outline-none cursor-pointer"
|
|
>
|
|
<option value="en" className="bg-gray-900">EN</option>
|
|
<option value="es" className="bg-gray-900">ES</option>
|
|
<option value="pt" className="bg-gray-900">PT</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="h-6 w-px bg-white/10 mx-2" />
|
|
|
|
{user ? (
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex flex-col items-end">
|
|
<span className="text-xs font-medium text-white">{user.full_name}</span>
|
|
<span className="text-[10px] text-gray-500 uppercase tracking-wider">{user.role}</span>
|
|
</div>
|
|
<button
|
|
onClick={logout}
|
|
className="p-2 hover:bg-red-500/10 hover:text-red-400 rounded-lg transition-all text-gray-500"
|
|
title="Sign Out"
|
|
>
|
|
<LogOut className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<Link
|
|
href="/auth/login"
|
|
className="text-sm font-medium text-blue-400 hover:text-blue-300 transition-colors"
|
|
>
|
|
Sign In
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|