41 lines
1.2 KiB
JavaScript
41 lines
1.2 KiB
JavaScript
'use client';
|
|
import { usePathname } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
|
|
export function NavLink({ href, children }) {
|
|
const pathname = usePathname();
|
|
const isActive = pathname === href;
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className={`px-5 py-3 rounded-lg font-semibold transition-all duration-300 text-lg relative group ${
|
|
isActive
|
|
? 'text-amber-600 bg-amber-50'
|
|
: 'text-gray-700 hover:text-amber-600 hover:bg-gray-100'
|
|
}`}
|
|
>
|
|
{children}
|
|
<span className={`absolute bottom-0 left-1/2 transform -translate-x-1/2 h-0.5 transition-all duration-300 ${
|
|
isActive ? 'w-4/5 bg-amber-600' : 'w-0 bg-amber-600 group-hover:w-4/5'
|
|
}`}></span>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
export function MobileNavLink({ href, children, onClick }) {
|
|
const pathname = usePathname();
|
|
const isActive = pathname === href;
|
|
return (
|
|
<Link
|
|
href={href}
|
|
onClick={onClick}
|
|
className={`block px-3 py-2 rounded-md text-base font-medium transition-colors ${
|
|
isActive
|
|
? 'text-amber-600 bg-amber-50'
|
|
: 'text-gray-700 hover:text-amber-600 hover:bg-gray-50'
|
|
}`}
|
|
>
|
|
{children}
|
|
</Link>
|
|
);
|
|
} |