Skip to content

Commit 95fc1f2

Browse files
jamesrp13jamesrp13
committed
Starter code
1 parent ed984e9 commit 95fc1f2

File tree

5 files changed

+86
-179
lines changed

5 files changed

+86
-179
lines changed

‎components/AddressForm.tsx

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React, { ChangeEvent, FormEvent, useState } from 'react';
2+
import styles from '../styles/AddressForm.module.css'
3+
4+
function AddressForm(props: { handler: (address: string) => void }) {
5+
6+
const [values, setValues] = useState({
7+
address: '',
8+
});
9+
10+
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
11+
e.preventDefault();
12+
props.handler(values.address)
13+
};
14+
15+
const handleAddressInputChange = (event: ChangeEvent<HTMLInputElement>) => {
16+
event.persist();
17+
setValues((values) => ({
18+
...values,
19+
address: event.target.value,
20+
}));
21+
};
22+
23+
return (
24+
<div className={styles.Form}>
25+
<form onSubmit={handleSubmit}>
26+
<input
27+
id="public-key"
28+
className={styles.formField}
29+
type="text"
30+
placeholder="Public Address, e.g. 7C4jsPZpht42Tw6MjXWF56Q5RQUocjBBmciEjDa8HRtp"
31+
name="firstName"
32+
value={values.address}
33+
onChange={handleAddressInputChange}
34+
/>
35+
<br />
36+
<button type="submit" className={styles.formButton}>
37+
Check SOL Balance
38+
</button>
39+
</form>
40+
</div>
41+
);
42+
}
43+
44+
export default AddressForm;

‎pages/api/hello.ts

-13
This file was deleted.

‎pages/index.tsx

+17-58
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,29 @@
11
import type { NextPage } from 'next'
2+
import { useState } from 'react'
23
import Head from 'next/head'
34
import Image from 'next/image'
45
import styles from '../styles/Home.module.css'
6+
import AddressForm from '../components/AddressForm'
57

68
const Home: NextPage = () => {
7-
return (
8-
<div className={styles.container}>
9-
<Head>
10-
<title>Create Next App</title>
11-
<meta name="description" content="Generated by create next app" />
12-
<link rel="icon" href="/favicon.ico" />
13-
</Head>
9+
const [balance, setBalance] = useState(0)
10+
const [address, setAddress] = useState('')
1411

15-
<main className={styles.main}>
16-
<h1 className={styles.title}>
17-
Welcome to <a href="https://nextjs.org">Next.js!</a>
18-
</h1>
12+
const addressSubmittedHandler = (address: string) => {
13+
setAddress(address)
14+
setBalance(1000)
15+
}
1916

20-
<p className={styles.description}>
21-
Get started by editing{' '}
22-
<code className={styles.code}>pages/index.tsx</code>
17+
return (
18+
<div className={styles.App}>
19+
<header className={styles.AppHeader}>
20+
<p>
21+
Start Your Solana Journey
2322
</p>
24-
25-
<div className={styles.grid}>
26-
<a href="https://nextjs.org/docs" className={styles.card}>
27-
<h2>Documentation &rarr;</h2>
28-
<p>Find in-depth information about Next.js features and API.</p>
29-
</a>
30-
31-
<a href="https://nextjs.org/learn" className={styles.card}>
32-
<h2>Learn &rarr;</h2>
33-
<p>Learn about Next.js in an interactive course with quizzes!</p>
34-
</a>
35-
36-
<a
37-
href="https://github.com/vercel/next.js/tree/canary/examples"
38-
className={styles.card}
39-
>
40-
<h2>Examples &rarr;</h2>
41-
<p>Discover and deploy boilerplate example Next.js projects.</p>
42-
</a>
43-
44-
<a
45-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
46-
className={styles.card}
47-
>
48-
<h2>Deploy &rarr;</h2>
49-
<p>
50-
Instantly deploy your Next.js site to a public URL with Vercel.
51-
</p>
52-
</a>
53-
</div>
54-
</main>
55-
56-
<footer className={styles.footer}>
57-
<a
58-
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
59-
target="_blank"
60-
rel="noopener noreferrer"
61-
>
62-
Powered by{' '}
63-
<span className={styles.logo}>
64-
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
65-
</span>
66-
</a>
67-
</footer>
23+
<AddressForm handler={addressSubmittedHandler} />
24+
<p>{`Address: ${address}`}</p>
25+
<p>{`Balance: ${balance} SOL`}</p>
26+
</header>
6827
</div>
6928
)
7029
}

‎styles/AddressForm.module.css

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.input {
2+
background: #f2f2f2;
3+
}
4+
5+
.formField {
6+
margin: 10px 0 10px 0;
7+
min-width: 500px;
8+
padding: 15px;
9+
font-size: 16px;
10+
border: 0;
11+
font-family: "Roboto", sans-serif;
12+
}
13+
.formButton {
14+
margin: 10px 0 10px 0;
15+
padding: 15px;
16+
font-size: 16px;
17+
border: 0;
18+
font-family: "Roboto", sans-serif;
19+
}

‎styles/Home.module.css

+6-108
Original file line numberDiff line numberDiff line change
@@ -1,116 +1,14 @@
1-
.container {
2-
padding: 0 2rem;
1+
.App {
2+
text-align: center;
33
}
44

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

0 commit comments

Comments
 (0)