Skip to content

Commit 9dfe515

Browse files
gocreatinggocreating
committedMay 5, 2024
Add sample-next-app
1 parent 0c6689a commit 9dfe515

15 files changed

+638
-0
lines changed
 

‎.gitignore

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
.next/
13+
out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
.pnpm-debug.log*
27+
28+
# local env files
29+
.env.local
30+
.env.development.local
31+
.env.test.local
32+
.env.production.local
33+
34+
# vercel
35+
.vercel
36+
37+
package-lock.json
38+
yarn.lock

‎package.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "chore-master-web",
3+
"version": "1.0.0",
4+
"repository": "git@github.com:chore-master/chore-master-web.git",
5+
"author": "gocreating <gocreating@gmail.com>",
6+
"license": "MIT",
7+
"devDependencies": {
8+
"workspaces": "^0.1.0",
9+
"yarn": "^1.22.22"
10+
},
11+
"private": true,
12+
"workspaces": [
13+
"packages/*"
14+
]
15+
}

‎packages/sample-next-app/.eslintrc.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next/core-web-vitals"
3+
}

‎packages/sample-next-app/.gitignore

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
.yarn/install-state.gz
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
23+
# debug
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel
33+
34+
# typescript
35+
*.tsbuildinfo
36+
next-env.d.ts

‎packages/sample-next-app/README.md

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2+
3+
## Getting Started
4+
5+
First, run the development server:
6+
7+
```bash
8+
npm run dev
9+
# or
10+
yarn dev
11+
# or
12+
pnpm dev
13+
# or
14+
bun dev
15+
```
16+
17+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18+
19+
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20+
21+
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
22+
23+
## Learn More
24+
25+
To learn more about Next.js, take a look at the following resources:
26+
27+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29+
30+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
31+
32+
## Deploy on Vercel
33+
34+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35+
36+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

‎packages/sample-next-app/next.config.mjs

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {};
3+
4+
export default nextConfig;

‎packages/sample-next-app/package.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "@app/sample-next-app",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "next dev",
7+
"build": "next build",
8+
"start": "next start",
9+
"lint": "next lint"
10+
},
11+
"dependencies": {
12+
"react": "^18",
13+
"react-dom": "^18",
14+
"next": "14.2.3"
15+
},
16+
"devDependencies": {
17+
"typescript": "^5",
18+
"@types/node": "^20",
19+
"@types/react": "^18",
20+
"@types/react-dom": "^18",
21+
"eslint": "^8",
22+
"eslint-config-next": "14.2.3"
23+
}
24+
}

‎packages/sample-next-app/public/next.svg

+1
Loading

‎packages/sample-next-app/public/vercel.svg

+1
Loading

‎packages/sample-next-app/src/app/favicon.ico

25.3 KB
Binary file not shown.

‎packages/sample-next-app/src/app/globals.css

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
:root {
2+
--max-width: 1100px;
3+
--border-radius: 12px;
4+
--font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
5+
"Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
6+
"Fira Mono", "Droid Sans Mono", "Courier New", monospace;
7+
8+
--foreground-rgb: 0, 0, 0;
9+
--background-start-rgb: 214, 219, 220;
10+
--background-end-rgb: 255, 255, 255;
11+
12+
--primary-glow: conic-gradient(
13+
from 180deg at 50% 50%,
14+
#16abff33 0deg,
15+
#0885ff33 55deg,
16+
#54d6ff33 120deg,
17+
#0071ff33 160deg,
18+
transparent 360deg
19+
);
20+
--secondary-glow: radial-gradient(
21+
rgba(255, 255, 255, 1),
22+
rgba(255, 255, 255, 0)
23+
);
24+
25+
--tile-start-rgb: 239, 245, 249;
26+
--tile-end-rgb: 228, 232, 233;
27+
--tile-border: conic-gradient(
28+
#00000080,
29+
#00000040,
30+
#00000030,
31+
#00000020,
32+
#00000010,
33+
#00000010,
34+
#00000080
35+
);
36+
37+
--callout-rgb: 238, 240, 241;
38+
--callout-border-rgb: 172, 175, 176;
39+
--card-rgb: 180, 185, 188;
40+
--card-border-rgb: 131, 134, 135;
41+
}
42+
43+
@media (prefers-color-scheme: dark) {
44+
:root {
45+
--foreground-rgb: 255, 255, 255;
46+
--background-start-rgb: 0, 0, 0;
47+
--background-end-rgb: 0, 0, 0;
48+
49+
--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
50+
--secondary-glow: linear-gradient(
51+
to bottom right,
52+
rgba(1, 65, 255, 0),
53+
rgba(1, 65, 255, 0),
54+
rgba(1, 65, 255, 0.3)
55+
);
56+
57+
--tile-start-rgb: 2, 13, 46;
58+
--tile-end-rgb: 2, 5, 19;
59+
--tile-border: conic-gradient(
60+
#ffffff80,
61+
#ffffff40,
62+
#ffffff30,
63+
#ffffff20,
64+
#ffffff10,
65+
#ffffff10,
66+
#ffffff80
67+
);
68+
69+
--callout-rgb: 20, 20, 20;
70+
--callout-border-rgb: 108, 108, 108;
71+
--card-rgb: 100, 100, 100;
72+
--card-border-rgb: 200, 200, 200;
73+
}
74+
}
75+
76+
* {
77+
box-sizing: border-box;
78+
padding: 0;
79+
margin: 0;
80+
}
81+
82+
html,
83+
body {
84+
max-width: 100vw;
85+
overflow-x: hidden;
86+
}
87+
88+
body {
89+
color: rgb(var(--foreground-rgb));
90+
background: linear-gradient(
91+
to bottom,
92+
transparent,
93+
rgb(var(--background-end-rgb))
94+
)
95+
rgb(var(--background-start-rgb));
96+
}
97+
98+
a {
99+
color: inherit;
100+
text-decoration: none;
101+
}
102+
103+
@media (prefers-color-scheme: dark) {
104+
html {
105+
color-scheme: dark;
106+
}
107+
}

‎packages/sample-next-app/src/app/layout.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import type { Metadata } from "next";
2+
import { Inter } from "next/font/google";
3+
import "./globals.css";
4+
5+
const inter = Inter({ subsets: ["latin"] });
6+
7+
export const metadata: Metadata = {
8+
title: "Create Next App",
9+
description: "Generated by create next app",
10+
};
11+
12+
export default function RootLayout({
13+
children,
14+
}: Readonly<{
15+
children: React.ReactNode;
16+
}>) {
17+
return (
18+
<html lang="en">
19+
<body className={inter.className}>{children}</body>
20+
</html>
21+
);
22+
}

‎packages/sample-next-app/src/app/page.module.css

+230
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
.main {
2+
display: flex;
3+
flex-direction: column;
4+
justify-content: space-between;
5+
align-items: center;
6+
padding: 6rem;
7+
min-height: 100vh;
8+
}
9+
10+
.description {
11+
display: inherit;
12+
justify-content: inherit;
13+
align-items: inherit;
14+
font-size: 0.85rem;
15+
max-width: var(--max-width);
16+
width: 100%;
17+
z-index: 2;
18+
font-family: var(--font-mono);
19+
}
20+
21+
.description a {
22+
display: flex;
23+
justify-content: center;
24+
align-items: center;
25+
gap: 0.5rem;
26+
}
27+
28+
.description p {
29+
position: relative;
30+
margin: 0;
31+
padding: 1rem;
32+
background-color: rgba(var(--callout-rgb), 0.5);
33+
border: 1px solid rgba(var(--callout-border-rgb), 0.3);
34+
border-radius: var(--border-radius);
35+
}
36+
37+
.code {
38+
font-weight: 700;
39+
font-family: var(--font-mono);
40+
}
41+
42+
.grid {
43+
display: grid;
44+
grid-template-columns: repeat(4, minmax(25%, auto));
45+
max-width: 100%;
46+
width: var(--max-width);
47+
}
48+
49+
.card {
50+
padding: 1rem 1.2rem;
51+
border-radius: var(--border-radius);
52+
background: rgba(var(--card-rgb), 0);
53+
border: 1px solid rgba(var(--card-border-rgb), 0);
54+
transition: background 200ms, border 200ms;
55+
}
56+
57+
.card span {
58+
display: inline-block;
59+
transition: transform 200ms;
60+
}
61+
62+
.card h2 {
63+
font-weight: 600;
64+
margin-bottom: 0.7rem;
65+
}
66+
67+
.card p {
68+
margin: 0;
69+
opacity: 0.6;
70+
font-size: 0.9rem;
71+
line-height: 1.5;
72+
max-width: 30ch;
73+
text-wrap: balance;
74+
}
75+
76+
.center {
77+
display: flex;
78+
justify-content: center;
79+
align-items: center;
80+
position: relative;
81+
padding: 4rem 0;
82+
}
83+
84+
.center::before {
85+
background: var(--secondary-glow);
86+
border-radius: 50%;
87+
width: 480px;
88+
height: 360px;
89+
margin-left: -400px;
90+
}
91+
92+
.center::after {
93+
background: var(--primary-glow);
94+
width: 240px;
95+
height: 180px;
96+
z-index: -1;
97+
}
98+
99+
.center::before,
100+
.center::after {
101+
content: "";
102+
left: 50%;
103+
position: absolute;
104+
filter: blur(45px);
105+
transform: translateZ(0);
106+
}
107+
108+
.logo {
109+
position: relative;
110+
}
111+
/* Enable hover only on non-touch devices */
112+
@media (hover: hover) and (pointer: fine) {
113+
.card:hover {
114+
background: rgba(var(--card-rgb), 0.1);
115+
border: 1px solid rgba(var(--card-border-rgb), 0.15);
116+
}
117+
118+
.card:hover span {
119+
transform: translateX(4px);
120+
}
121+
}
122+
123+
@media (prefers-reduced-motion) {
124+
.card:hover span {
125+
transform: none;
126+
}
127+
}
128+
129+
/* Mobile */
130+
@media (max-width: 700px) {
131+
.content {
132+
padding: 4rem;
133+
}
134+
135+
.grid {
136+
grid-template-columns: 1fr;
137+
margin-bottom: 120px;
138+
max-width: 320px;
139+
text-align: center;
140+
}
141+
142+
.card {
143+
padding: 1rem 2.5rem;
144+
}
145+
146+
.card h2 {
147+
margin-bottom: 0.5rem;
148+
}
149+
150+
.center {
151+
padding: 8rem 0 6rem;
152+
}
153+
154+
.center::before {
155+
transform: none;
156+
height: 300px;
157+
}
158+
159+
.description {
160+
font-size: 0.8rem;
161+
}
162+
163+
.description a {
164+
padding: 1rem;
165+
}
166+
167+
.description p,
168+
.description div {
169+
display: flex;
170+
justify-content: center;
171+
position: fixed;
172+
width: 100%;
173+
}
174+
175+
.description p {
176+
align-items: center;
177+
inset: 0 0 auto;
178+
padding: 2rem 1rem 1.4rem;
179+
border-radius: 0;
180+
border: none;
181+
border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
182+
background: linear-gradient(
183+
to bottom,
184+
rgba(var(--background-start-rgb), 1),
185+
rgba(var(--callout-rgb), 0.5)
186+
);
187+
background-clip: padding-box;
188+
backdrop-filter: blur(24px);
189+
}
190+
191+
.description div {
192+
align-items: flex-end;
193+
pointer-events: none;
194+
inset: auto 0 0;
195+
padding: 2rem;
196+
height: 200px;
197+
background: linear-gradient(
198+
to bottom,
199+
transparent 0%,
200+
rgb(var(--background-end-rgb)) 40%
201+
);
202+
z-index: 1;
203+
}
204+
}
205+
206+
/* Tablet and Smaller Desktop */
207+
@media (min-width: 701px) and (max-width: 1120px) {
208+
.grid {
209+
grid-template-columns: repeat(2, 50%);
210+
}
211+
}
212+
213+
@media (prefers-color-scheme: dark) {
214+
.vercelLogo {
215+
filter: invert(1);
216+
}
217+
218+
.logo {
219+
filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
220+
}
221+
}
222+
223+
@keyframes rotate {
224+
from {
225+
transform: rotate(360deg);
226+
}
227+
to {
228+
transform: rotate(0deg);
229+
}
230+
}

‎packages/sample-next-app/src/app/page.tsx

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import Image from "next/image";
2+
import styles from "./page.module.css";
3+
4+
export default function Home() {
5+
return (
6+
<main className={styles.main}>
7+
<div className={styles.description}>
8+
<p>
9+
Get started by editing&nbsp;
10+
<code className={styles.code}>src/app/page.tsx</code>
11+
</p>
12+
<div>
13+
<a
14+
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
15+
target="_blank"
16+
rel="noopener noreferrer"
17+
>
18+
By{" "}
19+
<Image
20+
src="/vercel.svg"
21+
alt="Vercel Logo"
22+
className={styles.vercelLogo}
23+
width={100}
24+
height={24}
25+
priority
26+
/>
27+
</a>
28+
</div>
29+
</div>
30+
31+
<div className={styles.center}>
32+
<Image
33+
className={styles.logo}
34+
src="/next.svg"
35+
alt="Next.js Logo"
36+
width={180}
37+
height={37}
38+
priority
39+
/>
40+
</div>
41+
42+
<div className={styles.grid}>
43+
<a
44+
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
45+
className={styles.card}
46+
target="_blank"
47+
rel="noopener noreferrer"
48+
>
49+
<h2>
50+
Docs <span>-&gt;</span>
51+
</h2>
52+
<p>Find in-depth information about Next.js features and API.</p>
53+
</a>
54+
55+
<a
56+
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
57+
className={styles.card}
58+
target="_blank"
59+
rel="noopener noreferrer"
60+
>
61+
<h2>
62+
Learn <span>-&gt;</span>
63+
</h2>
64+
<p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
65+
</a>
66+
67+
<a
68+
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
69+
className={styles.card}
70+
target="_blank"
71+
rel="noopener noreferrer"
72+
>
73+
<h2>
74+
Templates <span>-&gt;</span>
75+
</h2>
76+
<p>Explore starter templates for Next.js.</p>
77+
</a>
78+
79+
<a
80+
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
81+
className={styles.card}
82+
target="_blank"
83+
rel="noopener noreferrer"
84+
>
85+
<h2>
86+
Deploy <span>-&gt;</span>
87+
</h2>
88+
<p>
89+
Instantly deploy your Next.js site to a shareable URL with Vercel.
90+
</p>
91+
</a>
92+
</div>
93+
</main>
94+
);
95+
}

‎packages/sample-next-app/tsconfig.json

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"compilerOptions": {
3+
"lib": ["dom", "dom.iterable", "esnext"],
4+
"allowJs": true,
5+
"skipLibCheck": true,
6+
"strict": true,
7+
"noEmit": true,
8+
"esModuleInterop": true,
9+
"module": "esnext",
10+
"moduleResolution": "bundler",
11+
"resolveJsonModule": true,
12+
"isolatedModules": true,
13+
"jsx": "preserve",
14+
"incremental": true,
15+
"plugins": [
16+
{
17+
"name": "next"
18+
}
19+
],
20+
"paths": {
21+
"@/*": ["./src/*"]
22+
}
23+
},
24+
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25+
"exclude": ["node_modules"]
26+
}

0 commit comments

Comments
 (0)
Please sign in to comment.