future4code · brunobulgaron · Apr 8, 2020 · Apr 8, 2020
diff --git a/future-ninjas/src/components/CardVaga/CardVaga.js b/future-ninjas/src/components/CardVaga/CardVaga.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { ContainerCardVaga, ContainerItem, City, Techs, Tech } from './styles';
+import { ContainerCardVaga, ContainerItem, City, Techs, Tech, H1 } from './styles';
 import axios from 'axios';
 
 export default class CardVaga extends Component {
@@ -30,9 +30,9 @@ export default class CardVaga extends Component {
                 {this.state.listaDeVagas.map((vaga, index) => {
                     return (
                         <ContainerItem>
-                            <h1>{vaga.title}</h1>
+                            <H1>{vaga.title}</H1>
                             <City>{vaga.cidade}</City>
-                            <br />
+
                             <strong>R$ {vaga.value}</strong>
                             <p>{vaga.description}</p>
                             <Techs>

diff --git a/future-ninjas/src/components/CardVaga/styles.js b/future-ninjas/src/components/CardVaga/styles.js
@@ -13,7 +13,7 @@ export const ContainerItem = styled.div `
         box-shadow: 1px 1px 8px 8px lightgrey;
     }
 `
-export const City = styled.span`
+export const City = styled.p`
     color: #363636;
 `
 export const Techs = styled.ul`
@@ -23,3 +23,7 @@ export const Techs = styled.ul`
 export const Tech = styled.li`
 
 `
+
+export const H1 = styled.h1`
+    color: #7139c1;
+`
diff --git a/future-ninjas/src/components/FiltroVaga/FiltroVaga.js b/future-ninjas/src/components/FiltroVaga/FiltroVaga.js
@@ -0,0 +1,28 @@
+import React, { Component} from 'react';
+
+import { Container, Input  } from './style';
+
+export default class FiltroVaga extends Component {
+  render() {
+    return(
+        <Container>
+            <h3>Vagas</h3>
+            <p>253 resultados</p>
+
+            <h3>Localização</h3>
+            <p>São Paulo (141)</p>
+            <p>Florianópolis (43)</p>
+            <p>Rio de Janeiro (14)</p>
+            <p>Curitiba (8)</p>
+
+            <h3>Tipo de trabalho</h3>
+            <p>Aceita remoto (34)</p>
+            <p>Apenas presencial (100)</p>
+
+            <h3>Filtro por valor</h3>
+            <Input type="text" placeholder="Min"/> <span> - </span> <Input type="text" placeholder="Máx"/>
+
+        </Container>
+    )
+  }
+}
diff --git a/future-ninjas/src/components/FiltroVaga/style.js b/future-ninjas/src/components/FiltroVaga/style.js
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+    margin: 3vh 0;
+`
+export const Input = styled.input`
+    width: 70px;
+`
diff --git a/future-ninjas/src/components/Header/Header.js b/future-ninjas/src/components/Header/Header.js
@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+
+import { Container, ContainerHeader, Logo, HeaderFl, ButtonUi } from './style';
+
+import Button from '@material-ui/core/Button';
+
+export default class Header extends Component {
+  render() {
+    return (
+        <Container>
+          <ContainerHeader >
+            <Logo>Imagem</Logo>
+              <HeaderFl>
+                  <Button variant="outlined" onClick={this.props.onChangeQueroTrabalhar}>Ver Vagas</Button>            
+                  <span>Sou Empresa</span>            
+                  <span>Sou Candidato</span>            
+              </HeaderFl>
+          </ContainerHeader >
+        </Container>
+    );
+  }
+}
diff --git a/future-ninjas/src/components/Header/style.js b/future-ninjas/src/components/Header/style.js
@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  max-width: 100vw;
+  height: 10vh;
+  background: #9159c1;
+`
+
+export const HeaderFl = styled.div`
+width: 25vw;
+display: flex;
+justify-content: space-between; 
+`
+export const ContainerHeader = styled.div`
+  width: 70vw;
+  display: flex;
+  justify-content: space-between; 
+`
+export const Logo = styled.div``
diff --git a/future-ninjas/src/components/Home/Home.js b/future-ninjas/src/components/Home/Home.js
@@ -1,19 +1,16 @@
 import React from 'react';
-import { Container, ContainerHeader, Logo, Header, Section, Main, DivMain, ContainerItens, Item,SectionDetails, ContainerDetails, Span, Footer } from './style'
+import { Container, Section, Main, DivMain, ContainerItens, Item,SectionDetails, ContainerDetails, Span, Footer } from './style';
+
+import Header from '../Header/Header';
 
 class Home extends React.Component {
 
     render() {
         return (
             <Container>
-              <ContainerHeader >
-                <Logo>Imagem</Logo>
-                <Header>
-                    <span>Entrar</span>            
-                    {/* <NavigationIcon>Sou um profissional</NavigationIcon> */}
-                </Header>
-              </ContainerHeader >
-
+
+            <Header onChangeQueroTrabalhar={this.props.onChangeQueroTrabalhar}/>
+
               <Main>
                   <DivMain>
                     <h1>Contrate freelancers especializados para qualquer trabalho, on-line.</h1>

diff --git a/future-ninjas/src/components/Home/style.js b/future-ninjas/src/components/Home/style.js
@@ -2,22 +2,7 @@ import styled from 'styled-components'
 
 export const Container = styled.div``
 
-export const Header = styled.div`
-width: 20vw;
-display: flex;
-justify-content: space-between; 
-`
-export const ContainerHeader = styled.div`
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  max-width: 100vw;
-  height: 10vh;
-  background: #9159c1;
-`
-export const Logo = styled.div`
-
-`
+
 export const Main = styled.main`
  background: #131313;
  height: 85vh;

diff --git a/future-ninjas/src/components/QueroTrabalhar/QueroTrabalhar.js b/future-ninjas/src/components/QueroTrabalhar/QueroTrabalhar.js
@@ -1,22 +1,26 @@
 import React from 'react';
 import styled from 'styled-components'
-import {ContainerHeader, Header, Logo, Main, Search} from './styles'
+import {ContainerHeader, HeaderFl, Logo, Main, Search} from './styles'
 import CardVaga from '../CardVaga/CardVaga';
+import FiltroVaga from '../FiltroVaga/FiltroVaga';
+
+import Header from '../Header/Header'
 
 class QueroTrabalhar extends React.Component  {
     render() {
         return (
             <Container >
+                <Header />
                 <ContainerHeader >
-                    <Header>
+                    <HeaderFl>
                     {/* <Logo>Imagem</Logo> */}
                     <h1>Vagas para Desenvolvedores</h1>
                     <Search placeholder="Pesquisar vagas por tecnologia desejada.."></Search>
-                    </Header>
+                    </HeaderFl>
                 </ContainerHeader >
 
                 <Main>
-                    <div></div>
+                    <FiltroVaga />
                     <CardVaga />
                 </Main>    
 

diff --git a/future-ninjas/src/components/QueroTrabalhar/styles.js b/future-ninjas/src/components/QueroTrabalhar/styles.js
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-export const Header = styled.div`
+export const HeaderFl = styled.div`
     width: 30vw;
     display: flex;
     justify-content: space-between; 
@@ -10,7 +10,6 @@ export const Header = styled.div`
 `
 export const ContainerHeader = styled.div`
   display: flex;
-
   justify-content: space-around;
   align-items: center;
   max-width: 100vw;
@@ -23,8 +22,8 @@ export const Logo = styled.div`
 
 export const Main = styled.main`
     height: 85vh;
-    max-width: 100vw;
-    margin: 0;
+    max-width: 80vw;
+    margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 3fr 1fr;
 
@@ -40,4 +39,4 @@ export const Search = styled.input`
     ::placeholder {
         color: white;
     }
-`
+`