-
Notifications
You must be signed in to change notification settings - Fork 535
/
index.js
70 lines (64 loc) · 2.42 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import Head from 'next/head'
import { useRouter } from 'next/router'
import db from '../db.json'
import Footer from '../src/components/Footer'
import GitHubCorner from '../src/components/GitHubCorner'
import QuizBackground from '../src/components/QuizBackground'
import QuizLogo from '../src/components/QuizLogo'
import Widget from '../src/components/Widget'
import Input from '../src/components/Input'
import Button from '../src/components/Button'
import QuizContainer from '../src/components/QuizContainer'
export default function Home() {
const router = useRouter()
const [name, setName] = React.useState('')
const handleSubmit = (e) => {
e.preventDefault()
router.push(`/quiz?name=${name}`)
}
const getInputValues = (e) => {
e.preventDefault()
setName(e.target.value)
}
return (
<QuizBackground backgroundImage={db.bg}>
<Head>
<title>Alura Quiz - Tibia</title>
</Head>
<QuizContainer>
<QuizLogo src="https://i.imgur.com/I7XsveX.png" />
<Widget>
<Widget.Header></Widget.Header>
<Widget.Content>
<p>{db.description}</p>
<form onSubmit={handleSubmit}>
<Input
name="nomeDoPersonagem"
onChange={getInputValues}
type="text"
placeholder="type your player name"
value={name}
required
></Input>
<div>
<Button
type="submit"
disabled={name.length === 0}
>
<strong>JOGAR AGORA</strong>
</Button>
</div>
</form>
</Widget.Content>
</Widget>
<Widget>
<Widget.Content>
<h1>Quizes da Galera</h1>
</Widget.Content>
</Widget>
<Footer />
</QuizContainer>
<GitHubCorner projectUrl="https://github.com/bentoco" />
</QuizBackground>
)
}