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
@@ -8,6 +8,7 @@
 			"name": "no-copy",
 			"version": "0.1.0",
 			"dependencies": {
+				"clsx": "^2.1.1",
 				"next": "16.0.3",
 				"react": "19.2.0",
 				"react-dom": "19.2.0"
@@ -2323,6 +2324,15 @@
 			"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
 			"license": "MIT"
 		},
+		"node_modules/clsx": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+			"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/color-convert": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -9,6 +9,7 @@
 		"lint": "eslint"
 	},
 	"dependencies": {
+		"clsx": "^2.1.1",
 		"next": "16.0.3",
 		"react": "19.2.0",
 		"react-dom": "19.2.0"
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import NavLinks from '@/app/ui/nav-links'
 import "./globals.css";

 const geistSans = Geist({
@@ -25,6 +26,7 @@ export default function RootLayout({
 	return (
 		<html lang="en">
 			<body className={`${geistSans.variable} ${geistMono.variable}`}>
+				<NavLinks />
 				{children}
 			</body>
 		</html>
@@ -1,64 +1,16 @@
-import Image from "next/image";
 import styles from "./page.module.css";
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+	title: 'Home page',
+};

 export default function Home() {
 	return (
 		<div className={styles.page}>
 			<main className={styles.main}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
 				<div className={styles.intro}>
-          <h1>To get started, edit the page.tsx file.</h1>
-          <p>
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className={styles.ctas}>
-          <a
-            className={styles.primary}
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className={styles.logo}
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className={styles.secondary}
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
+					Home page
 				</div>
 			</main>
 		</div>
@@ -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>
+	);
+}
@@ -1,7 +1,11 @@
 {
 	"compilerOptions": {
 		"target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+		"lib": [
+			"dom",
+			"dom.iterable",
+			"esnext"
+		],
 		"allowJs": true,
 		"skipLibCheck": true,
 		"strict": true,
@@ -19,7 +23,9 @@
 			}
 		],
 		"paths": {
-      "@/*": ["./src/*"]
+			"@/*": [
+				"./src/*"
+			]
 		}
 	},
 	"include": [
@@ -30,5 +36,7 @@
 		".next/dev/types/**/*.ts",
 		"**/*.mts"
 	],
-  "exclude": ["node_modules"]
+	"exclude": [
+		"node_modules"
+	]
 }