no-copy project init

2025-11-24 18:52:32 +07:00
parent 3cb4e89dd1
commit 10668aa997
10 changed files with 6212 additions and 6186 deletions
@@ -0,0 +1,53 @@
+'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>
+	);
+}