Update index page

pages/index.js

@@ -1,5 +1,4 @@
 import React, { useState } from 'react'
-import styled from 'styled-components'
 import { useRouter } from 'next/router'
 
 import db from '../db.json'
@@ -8,56 +7,9 @@ import QuizLogo from '../src/components/QuizLogo'
 import QuizBackground from '../src/components/QuizBackground'
 import Footer from '../src/components/Footer'
 import GitHubCorner from '../src/components/GitHubCorner'
-
-export const QuizContainer = styled.div`
- width: 100%;
- max-width: 350px;
- padding-top: 15px;
- margin: auto 10%;
- @media screen and (max-width: 500px) {
- margin: auto;
- padding-top: 15px;
- }
-
- form {
- display: flex;
- align-items: center;
- flex-direction: column;
- }
-
- form > input {
- color: ${db.theme.colors.contrastText};
- border: 1px solid ${db.theme.colors.contrastText};
- border-radius: 3.5px;
- background: none;
- width: 100%;
- padding: 10px 0px 10px 10px;
- margin-bottom: 10px;
- font-family: Lato;
- }
-
- form > button {
- background: ${db.theme.colors.primary};
- color: ${db.theme.colors.contrastText};
- box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 2px rgba(0, 0, 0, 0.24);
- border-radius: 4px;
- width: 100%;
- padding: 10px 0px 10px 0px;
- font-family: Lato;
- text-transform: uppercase;
- cursor: pointer;
- font-weight: 400;
- }
-
- form > button:hover {
- background: ${db.theme.colors.primary}DD;
- }
-
- form > button:disabled{
- background: ${db.theme.colors.mainBg};
- cursor: not-allowed;
- }
-`
+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()
@@ -81,15 +33,17 @@ export default function Home() {
  console.log('Fazendo uma submissão por meio do react')
  }}
  >
- <input
+ <Input
+ name="nomeDoUsuario"
  onChange={(infosDoEvento) => {
  setName(infosDoEvento.target.value)
  }}
  placeholder="Diz ai seu nome"
+ value={name}
  />
- <button type="submit" disabled={name.length === 0}>
+ <Button type="submit" disabled={name.length === 0}>
  {`Jogar ${name}`}
- </button>
+ </Button>
  </form>
  </Widget.Content>
  </Widget>