frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

no-copy project init

Browse Source
This commit is contained in:
smanylov
2025-11-24 18:52:32 +07:00
parent 3cb4e89dd1
commit 10668aa997
10 changed files with 6212 additions and 6186 deletions
Download Patch File Download Diff File Expand all files Collapse all files
next.config.ts
+1 -1
View File
@@ -1,7 +1,7 @@
import type { NextConfig } from "next"; import type { NextConfig } from "next";
const nextConfig: NextConfig = { const nextConfig: NextConfig = {
/* config options here */ /* config options here */
}; };
export default nextConfig; export default nextConfig;
package-lock.json
Generated
+5947 -5937
View File
File diff suppressed because it is too large Load Diff
package.json
+23 -22
View File
@@ -1,24 +1,25 @@
{ {
"name": "no-copy", "name": "no-copy",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "next dev", "dev": "next dev",
"build": "next build", "build": "next build",
"start": "next start", "start": "next start",
"lint": "eslint" "lint": "eslint"
}, },
"dependencies": { "dependencies": {
"next": "16.0.3", "clsx": "^2.1.1",
"react": "19.2.0", "next": "16.0.3",
"react-dom": "19.2.0" "react": "19.2.0",
}, "react-dom": "19.2.0"
"devDependencies": { },
"@types/node": "^20", "devDependencies": {
"@types/react": "^19", "@types/node": "^20",
"@types/react-dom": "^19", "@types/react": "^19",
"eslint": "^9", "@types/react-dom": "^19",
"eslint-config-next": "16.0.3", "eslint": "^9",
"typescript": "^5" "eslint-config-next": "16.0.3",
} "typescript": "^5"
}
} }
src/app/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 25 KiB

src/app/globals.css
+22 -22
View File
@@ -1,42 +1,42 @@
:root { :root {
--background: #ffffff; --background: #ffffff;
--foreground: #171717; --foreground: #171717;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--background: #0a0a0a; --background: #0a0a0a;
--foreground: #ededed; --foreground: #ededed;
} }
} }
html, html,
body { body {
max-width: 100vw; max-width: 100vw;
overflow-x: hidden; overflow-x: hidden;
} }
body { body {
color: var(--foreground); color: var(--foreground);
background: var(--background); background: var(--background);
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
* { * {
box-sizing: border-box; box-sizing: border-box;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
a { a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html { html {
color-scheme: dark; color-scheme: dark;
} }
} }
src/app/layout.tsx
+17 -15
View File
@@ -1,32 +1,34 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google"; import { Geist, Geist_Mono } from "next/font/google";
import NavLinks from '@/app/ui/nav-links'
import "./globals.css"; import "./globals.css";
const geistSans = Geist({ const geistSans = Geist({
variable: "--font-geist-sans", variable: "--font-geist-sans",
subsets: ["latin"], subsets: ["latin"],
}); });
const geistMono = Geist_Mono({ const geistMono = Geist_Mono({
variable: "--font-geist-mono", variable: "--font-geist-mono",
subsets: ["latin"], subsets: ["latin"],
}); });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Create Next App", title: "Create Next App",
description: "Generated by create next app", description: "Generated by create next app",
}; };
export default function RootLayout({ export default function RootLayout({
children, children,
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="en"> <html lang="en">
<body className={`${geistSans.variable} ${geistMono.variable}`}> <body className={`${geistSans.variable} ${geistMono.variable}`}>
{children} <NavLinks />
</body> {children}
</html> </body>
); </html>
);
} }
src/app/page.module.css
+94 -94
View File
@@ -1,141 +1,141 @@
.page { .page {
--background: #fafafa; --background: #fafafa;
--foreground: #fff; --foreground: #fff;
--text-primary: #000; --text-primary: #000;
--text-secondary: #666; --text-secondary: #666;
--button-primary-hover: #383838; --button-primary-hover: #383838;
--button-secondary-hover: #f2f2f2; --button-secondary-hover: #f2f2f2;
--button-secondary-border: #ebebeb; --button-secondary-border: #ebebeb;
display: flex; display: flex;
min-height: 100vh; min-height: 100vh;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-family: var(--font-geist-sans); font-family: var(--font-geist-sans);
background-color: var(--background); background-color: var(--background);
} }
.main { .main {
display: flex; display: flex;
min-height: 100vh; min-height: 100vh;
width: 100%; width: 100%;
max-width: 800px; max-width: 800px;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
background-color: var(--foreground); background-color: var(--foreground);
padding: 120px 60px; padding: 120px 60px;
} }
.intro { .intro {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
text-align: left; text-align: left;
gap: 24px; gap: 24px;
} }
.intro h1 { .intro h1 {
max-width: 320px; max-width: 320px;
font-size: 40px; font-size: 40px;
font-weight: 600; font-weight: 600;
line-height: 48px; line-height: 48px;
letter-spacing: -2.4px; letter-spacing: -2.4px;
text-wrap: balance; text-wrap: balance;
color: var(--text-primary); color: var(--text-primary);
} }
.intro p { .intro p {
max-width: 440px; max-width: 440px;
font-size: 18px; font-size: 18px;
line-height: 32px; line-height: 32px;
text-wrap: balance; text-wrap: balance;
color: var(--text-secondary); color: var(--text-secondary);
} }
.intro a { .intro a {
font-weight: 500; font-weight: 500;
color: var(--text-primary); color: var(--text-primary);
} }
.ctas { .ctas {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 100%; width: 100%;
max-width: 440px; max-width: 440px;
gap: 16px; gap: 16px;
font-size: 14px; font-size: 14px;
} }
.ctas a { .ctas a {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 40px; height: 40px;
padding: 0 16px; padding: 0 16px;
border-radius: 128px; border-radius: 128px;
border: 1px solid transparent; border: 1px solid transparent;
transition: 0.2s; transition: 0.2s;
cursor: pointer; cursor: pointer;
width: fit-content; width: fit-content;
font-weight: 500; font-weight: 500;
} }
a.primary { a.primary {
background: var(--text-primary); background: var(--text-primary);
color: var(--background); color: var(--background);
gap: 8px; gap: 8px;
} }
a.secondary { a.secondary {
border-color: var(--button-secondary-border); border-color: var(--button-secondary-border);
} }
/* Enable hover only on non-touch devices */ /* Enable hover only on non-touch devices */
@media (hover: hover) and (pointer: fine) { @media (hover: hover) and (pointer: fine) {
a.primary:hover { a.primary:hover {
background: var(--button-primary-hover); background: var(--button-primary-hover);
border-color: transparent; border-color: transparent;
} }
a.secondary:hover { a.secondary:hover {
background: var(--button-secondary-hover); background: var(--button-secondary-hover);
border-color: transparent; border-color: transparent;
} }
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.main { .main {
padding: 48px 24px; padding: 48px 24px;
} }
.intro { .intro {
gap: 16px; gap: 16px;
} }
.intro h1 { .intro h1 {
font-size: 32px; font-size: 32px;
line-height: 40px; line-height: 40px;
letter-spacing: -1.92px; letter-spacing: -1.92px;
} }
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.logo { .logo {
filter: invert(); filter: invert();
} }
.page { .page {
--background: #000; --background: #000;
--foreground: #000; --foreground: #000;
--text-primary: #ededed; --text-primary: #ededed;
--text-secondary: #999; --text-secondary: #999;
--button-primary-hover: #ccc; --button-primary-hover: #ccc;
--button-secondary-hover: #1a1a1a; --button-secondary-hover: #1a1a1a;
--button-secondary-border: #1a1a1a; --button-secondary-border: #1a1a1a;
} }
} }
src/app/page.tsx
+14 -62
View File
@@ -1,66 +1,18 @@
import Image from "next/image";
import styles from "./page.module.css"; import styles from "./page.module.css";
import { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Home page',
};
export default function Home() { export default function Home() {
return ( return (
<div className={styles.page}> <div className={styles.page}>
<main className={styles.main}> <main className={styles.main}>
<Image <div className={styles.intro}>
className={styles.logo} Home page
src="/next.svg" </div>
alt="Next.js logo" </main>
width={100} </div>
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>
</div>
</main>
</div>
);
} }
src/app/ui/nav-links.tsx
+53
View File
@@ -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>
);
}
tsconfig.json
+41 -33
View File
@@ -1,34 +1,42 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "ES2017", "target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"], "lib": [
"allowJs": true, "dom",
"skipLibCheck": true, "dom.iterable",
"strict": true, "esnext"
"noEmit": true, ],
"esModuleInterop": true, "allowJs": true,
"module": "esnext", "skipLibCheck": true,
"moduleResolution": "bundler", "strict": true,
"resolveJsonModule": true, "noEmit": true,
"isolatedModules": true, "esModuleInterop": true,
"jsx": "react-jsx", "module": "esnext",
"incremental": true, "moduleResolution": "bundler",
"plugins": [ "resolveJsonModule": true,
{ "isolatedModules": true,
"name": "next" "jsx": "react-jsx",
} "incremental": true,
], "plugins": [
"paths": { {
"@/*": ["./src/*"] "name": "next"
} }
}, ],
"include": [ "paths": {
"next-env.d.ts", "@/*": [
"**/*.ts", "./src/*"
"**/*.tsx", ]
".next/types/**/*.ts", }
".next/dev/types/**/*.ts", },
"**/*.mts" "include": [
], "next-env.d.ts",
"exclude": ["node_modules"] "**/*.ts",
} "**/*.tsx",
".next/types/**/*.ts",
".next/dev/types/**/*.ts",
"**/*.mts"
],
"exclude": [
"node_modules"
]
}