Skip to content

Commit e7b36c9

Browse files
devrntdevrnt
committed
docs: add nextjs example
1 parent 2497673 commit e7b36c9

File tree

10 files changed

+4229
-0
lines changed

10 files changed

+4229
-0
lines changed

‎examples/README.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
## Examples
2+
3+
You can view the source code for the examples within their folder, or visit the codesandbox to see how the example works.
4+
5+
| Name | Link |
6+
| ------ | ----------------------------------------------------------------------------------- |
7+
| Gatsby | https://codesandbox.io/s/github/devrnt/react-use-wizard/tree/master/examples/gatsby |
8+
| NextJS | https://codesandbox.io/s/github/devrnt/react-use-wizard/tree/master/examples/nextjs |

‎examples/nextjs/.gitignore‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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+
27+
# local env files
28+
.env.local
29+
.env.development.local
30+
.env.test.local
31+
.env.production.local
32+
33+
# vercel
34+
.vercel

‎examples/nextjs/package.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "nextjs",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "next dev",
7+
"build": "next build",
8+
"start": "next start"
9+
},
10+
"dependencies": {
11+
"next": "10.0.3",
12+
"react": "17.0.1",
13+
"react-dom": "17.0.1",
14+
"react-use-wizard": "^0.2.0"
15+
}
16+
}

‎examples/nextjs/pages/api/hello.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2+
3+
export default (req, res) => {
4+
res.statusCode = 200
5+
res.json({ name: 'John Doe' })
6+
}

‎examples/nextjs/public/favicon.ico‎

14.7 KB
Binary file not shown.

‎examples/nextjs/public/vercel.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎examples/nextjs/sandbox.config.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"container": {
3+
"port": 3000,
4+
"startScript": "dev"
5+
}
6+
}

‎examples/nextjs/styles/Home.module.css‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
.container {
2+
min-height: 100vh;
3+
padding: 0 0.5rem;
4+
display: flex;
5+
flex-direction: column;
6+
justify-content: center;
7+
align-items: center;
8+
}
9+
10+
.main {
11+
padding: 5rem 0;
12+
flex: 1;
13+
display: flex;
14+
flex-direction: column;
15+
justify-content: center;
16+
align-items: center;
17+
}
18+
19+
.footer {
20+
width: 100%;
21+
height: 100px;
22+
border-top: 1px solid #eaeaea;
23+
display: flex;
24+
justify-content: center;
25+
align-items: center;
26+
}
27+
28+
.footer img {
29+
margin-left: 0.5rem;
30+
}
31+
32+
.footer a {
33+
display: flex;
34+
justify-content: center;
35+
align-items: center;
36+
}
37+
38+
.title a {
39+
color: #0070f3;
40+
text-decoration: none;
41+
}
42+
43+
.title a:hover,
44+
.title a:focus,
45+
.title a:active {
46+
text-decoration: underline;
47+
}
48+
49+
.title {
50+
margin: 0;
51+
line-height: 1.15;
52+
font-size: 4rem;
53+
}
54+
55+
.title,
56+
.description {
57+
text-align: center;
58+
}
59+
60+
.description {
61+
line-height: 1.5;
62+
font-size: 1.5rem;
63+
}
64+
65+
.code {
66+
background: #fafafa;
67+
border-radius: 5px;
68+
padding: 0.75rem;
69+
font-size: 1.1rem;
70+
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
71+
Bitstream Vera Sans Mono, Courier New, monospace;
72+
}
73+
74+
.grid {
75+
display: flex;
76+
align-items: center;
77+
justify-content: center;
78+
flex-wrap: wrap;
79+
max-width: 800px;
80+
margin-top: 3rem;
81+
}
82+
83+
.card {
84+
margin: 1rem;
85+
flex-basis: 45%;
86+
padding: 1.5rem;
87+
text-align: left;
88+
color: inherit;
89+
text-decoration: none;
90+
border: 1px solid #eaeaea;
91+
border-radius: 10px;
92+
transition: color 0.15s ease, border-color 0.15s ease;
93+
}
94+
95+
.card:hover,
96+
.card:focus,
97+
.card:active {
98+
color: #0070f3;
99+
border-color: #0070f3;
100+
}
101+
102+
.card h3 {
103+
margin: 0 0 1rem 0;
104+
font-size: 1.5rem;
105+
}
106+
107+
.card p {
108+
margin: 0;
109+
font-size: 1.25rem;
110+
line-height: 1.5;
111+
}
112+
113+
.logo {
114+
height: 1em;
115+
}
116+
117+
@media (max-width: 600px) {
118+
.grid {
119+
width: 100%;
120+
flex-direction: column;
121+
}
122+
}

‎examples/nextjs/styles/globals.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
html,
2+
body {
3+
padding: 0;
4+
margin: 0;
5+
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
6+
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
7+
}
8+
9+
a {
10+
color: inherit;
11+
text-decoration: none;
12+
}
13+
14+
* {
15+
box-sizing: border-box;
16+
}

0 commit comments

Comments
 (0)