54 lines
1.1 KiB
TypeScript
54 lines
1.1 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import Link from 'next/link';
|
||
|
|
import { usePathname } from 'next/navigation';
|
||
|
|
import clsx from 'clsx';
|
||
|
|
import styles from '@/app/page.module.css'
|
||
|
|
|
||
|
|
const links = [
|
||
|
|
{
|
||
|
|
name: 'Home',
|
||
|
|
href: '/',
|
||
|
|
icon: 'HomeIcon'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Page1',
|
||
|
|
href: '/page1',
|
||
|
|
icon: 'page1Icon',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Page2',
|
||
|
|
href: '/page2',
|
||
|
|
icon: 'page2Icon',
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
export default function NavLinks() {
|
||
|
|
const pathname = usePathname();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className='bg-[#fafafa]'>
|
||
|
|
<nav className={`${styles.nav}` + " flex max-w-[800px] w-full"}>
|
||
|
|
{links.map((link) => {
|
||
|
|
const LinkIcon = link.icon;
|
||
|
|
return (
|
||
|
|
<Link
|
||
|
|
key={link.name}
|
||
|
|
href={link.href}
|
||
|
|
className={clsx(
|
||
|
|
'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
|
||
|
|
{
|
||
|
|
'bg-sky-100 text-blue-600': pathname === link.href,
|
||
|
|
},
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<LinkIcon />
|
||
|
|
<p className="hidden md:block">{link.name}</p>
|
||
|
|
</Link>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|