75 lines
3.3 KiB
TypeScript
75 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { useTranslations } from 'next-intl';
|
|
import { Code2, BookOpen, Mail, Sparkles } from 'lucide-react';
|
|
|
|
export function Navbar({ locale }: { locale: string }) {
|
|
const t = useTranslations('nav');
|
|
const pathname = usePathname();
|
|
|
|
const navItems = [
|
|
{ href: `/${locale}`, label: t('home'), icon: Sparkles },
|
|
{ href: `/${locale}/lessons`, label: t('lessons'), icon: Code2 },
|
|
{ href: `/${locale}/cheatsheets`, label: t('cheatsheets'), icon: BookOpen },
|
|
{ href: `/${locale}/contact`, label: t('contact'), icon: Mail },
|
|
];
|
|
|
|
return (
|
|
<header className="sticky top-0 z-50 w-full border-b border-slate-800 bg-slate-950/80 backdrop-blur-xl transition-all">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
|
|
|
|
{/* Logo & Brand */}
|
|
<Link href={`/${locale}`} className="flex items-center gap-3 group">
|
|
<div className="w-10 h-10 rounded-xl bg-slate-900 border border-slate-800 flex items-center justify-center shadow-lg shadow-red-500/20 group-hover:scale-105 transition-transform overflow-hidden">
|
|
<img src="/logo.jpeg" alt="ayris.tech Logo" className="w-full h-full object-cover" />
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="font-extrabold text-lg text-white tracking-tight flex items-center gap-1.5">
|
|
ayris.tech <span className="text-xs px-2 py-0.5 rounded-full bg-red-500/10 text-red-400 border border-red-500/20">YouTube</span>
|
|
</span>
|
|
<span className="text-[11px] text-slate-400 font-medium">Educational Code & Resource Hub</span>
|
|
</div>
|
|
</Link>
|
|
|
|
{/* Center Nav Links */}
|
|
<nav className="hidden md:flex items-center gap-1 bg-slate-900/60 p-1.5 rounded-full border border-slate-800">
|
|
{navItems.map((item) => {
|
|
const Icon = item.icon;
|
|
const isActive = pathname === item.href || (item.href !== `/${locale}` && pathname.startsWith(item.href));
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={`flex items-center gap-2 px-4 py-2 rounded-full text-xs font-semibold transition-all ${
|
|
isActive
|
|
? 'bg-red-600 text-white shadow-md shadow-red-600/20'
|
|
: 'text-slate-300 hover:text-white hover:bg-slate-800/60'
|
|
}`}
|
|
>
|
|
<Icon className="w-3.5 h-3.5" />
|
|
{item.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
{/* Right Action: YouTube Subscribe */}
|
|
<div className="flex items-center gap-3">
|
|
<a
|
|
href="https://youtube.com"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-red-600 to-red-700 hover:from-red-500 hover:to-red-600 text-white text-xs font-bold rounded-full shadow-lg shadow-red-600/20 hover:shadow-red-600/30 transition-all hover:scale-105"
|
|
>
|
|
<img src="/logo.jpeg" alt="Logo" className="w-4 h-4 rounded-full object-cover" />
|
|
<span>{t('subscribe')}</span>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|