Skip to content

Commit b33d2fd

Browse files
weaponsforgeweaponsforge
committed
chore: Display item list in the home page
1 parent 42244bb commit b33d2fd

File tree

6 files changed

+69
-127
lines changed

6 files changed

+69
-127
lines changed

‎client/src/common/layout/head/index.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import Head from 'next/head'
2+
3+
export default function HeadComponent () {
4+
return (
5+
<Head>
6+
<title>React Hooks Playground</title>
7+
<meta name="description" content="React Hooks Playground" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
<link rel="icon" href="/favicon.ico" />
10+
</Head>
11+
)
12+
}

‎client/src/components/home/index.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import Link from 'next/link'
2+
import { Inter } from 'next/font/google'
3+
import styles from '@/styles/Home.module.css'
4+
5+
const inter = Inter({ subsets: ['latin'] })
6+
7+
export default function HomeComponent() {
8+
return (
9+
<main className={styles.main}>
10+
<div className={styles.description}>
11+
<div className={styles.h2}>
12+
<h1 className={inter.className}>
13+
React Hooks Playground
14+
</h1>
15+
</div>
16+
17+
<Link href="/usesyncexternalstore" className={styles.card}>
18+
useSyncExternalStore
19+
</Link>
20+
</div>
21+
</main>
22+
)
23+
}

‎client/src/pages/index.js‎

Lines changed: 4 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,123 +1,11 @@
1-
import Head from 'next/head'
2-
import Image from 'next/image'
3-
import { Inter } from 'next/font/google'
4-
import styles from '@/styles/Home.module.css'
5-
6-
const inter = Inter({ subsets: ['latin'] })
1+
import HeadComponent from '@/common/layout/head'
2+
import HomeComponent from '@/components/home'
73

84
export default function Home() {
95
return (
106
<>
11-
<Head>
12-
<title>Create Next App</title>
13-
<meta name="description" content="Generated by create next app" />
14-
<meta name="viewport" content="width=device-width, initial-scale=1" />
15-
<link rel="icon" href="/favicon.ico" />
16-
</Head>
17-
<main className={styles.main}>
18-
<div className={styles.description}>
19-
<p>
20-
Get started by editing&nbsp;
21-
<code className={styles.code}>src/pages/index.js</code>
22-
</p>
23-
<div>
24-
<a
25-
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
26-
target="_blank"
27-
rel="noopener noreferrer"
28-
>
29-
By{' '}
30-
<Image
31-
src="/vercel.svg"
32-
alt="Vercel Logo"
33-
className={styles.vercelLogo}
34-
width={100}
35-
height={24}
36-
priority
37-
/>
38-
</a>
39-
</div>
40-
</div>
41-
42-
<div className={styles.center}>
43-
<Image
44-
className={styles.logo}
45-
src="/next.svg"
46-
alt="Next.js Logo"
47-
width={180}
48-
height={37}
49-
priority
50-
/>
51-
<div className={styles.thirteen}>
52-
<Image
53-
src="/thirteen.svg"
54-
alt="13"
55-
width={40}
56-
height={31}
57-
priority
58-
/>
59-
</div>
60-
</div>
61-
62-
<div className={styles.grid}>
63-
<a
64-
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
65-
className={styles.card}
66-
target="_blank"
67-
rel="noopener noreferrer"
68-
>
69-
<h2 className={inter.className}>
70-
Docs <span>-&gt;</span>
71-
</h2>
72-
<p className={inter.className}>
73-
Find in-depth information about Next.js features and&nbsp;API.
74-
</p>
75-
</a>
76-
77-
<a
78-
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
79-
className={styles.card}
80-
target="_blank"
81-
rel="noopener noreferrer"
82-
>
83-
<h2 className={inter.className}>
84-
Learn <span>-&gt;</span>
85-
</h2>
86-
<p className={inter.className}>
87-
Learn about Next.js in an interactive course with&nbsp;quizzes!
88-
</p>
89-
</a>
90-
91-
<a
92-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
93-
className={styles.card}
94-
target="_blank"
95-
rel="noopener noreferrer"
96-
>
97-
<h2 className={inter.className}>
98-
Templates <span>-&gt;</span>
99-
</h2>
100-
<p className={inter.className}>
101-
Discover and deploy boilerplate example Next.js&nbsp;projects.
102-
</p>
103-
</a>
104-
105-
<a
106-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
107-
className={styles.card}
108-
target="_blank"
109-
rel="noopener noreferrer"
110-
>
111-
<h2 className={inter.className}>
112-
Deploy <span>-&gt;</span>
113-
</h2>
114-
<p className={inter.className}>
115-
Instantly deploy your Next.js site to a shareable URL
116-
with&nbsp;Vercel.
117-
</p>
118-
</a>
119-
</div>
120-
</main>
7+
<HeadComponent />
8+
<HomeComponent />
1219
</>
12210
)
12311
}

‎client/src/pages/usesyncexternalstore/index.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import HeadComponent from '@/common/layout/head'
2+
3+
function useSyncExternalStoreContainer () {
4+
return (
5+
<>
6+
<HeadComponent />
7+
8+
<h2>
9+
useSyncExternalStoreContainer
10+
</h2>
11+
</>
12+
)
13+
}
14+
15+
export default useSyncExternalStoreContainer

‎client/src/styles/Home.module.css‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
.main {
2-
display: flex;
3-
flex-direction: column;
4-
justify-content: space-between;
5-
align-items: center;
2+
3+
height: 100vh;
4+
display: grid;
5+
place-content: center;
66
padding: 6rem;
7-
min-height: 100vh;
7+
88
}
99

1010
.description {
@@ -16,6 +16,7 @@
1616
width: 100%;
1717
z-index: 2;
1818
font-family: var(--font-mono);
19+
margin: auto;
1920
}
2021

2122
.description a {
@@ -72,6 +73,11 @@
7273
max-width: 30ch;
7374
}
7475

76+
.h2 {
77+
text-align: center;
78+
margin-bottom: 24px;
79+
}
80+
7581
.center {
7682
display: flex;
7783
justify-content: center;

‎client/src/styles/globals.css‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
html, body {
2+
font-family: Arial, Helvetica, sans-serif;
3+
}
4+
15
:root {
26
--max-width: 1100px;
37
--border-radius: 12px;
@@ -87,12 +91,6 @@ body {
8791

8892
body {
8993
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));
9694
}
9795

9896
a {

0 commit comments

Comments
 (0)