Merge pull request #9 from Andresavieira28/master

finalizando forms

src/App.js

@@ -2,13 +2,13 @@ import { useState } from 'react';
 import Banner from './componentes/Banner/banner';
 import Form from './componentes/form/form'
 import Time from './componentes/Time/time';
+import Rodape from './componentes/rodape/rodape';
 
 function App() {
 
   const [colaboradores, setColaboradores] = useState([]);
 
   const aoNovoColaboradorAdd = (colaborador) => {
-    console.log(colaborador);
     setColaboradores ([...colaboradores,colaborador])
   }
 
@@ -69,6 +69,8 @@ function App() {
         corSecundaria={time.corSecundaria}
         colaboradores={colaboradores.filter(colaborador => colaborador.time === time.nome)}
       />)}
+
+      <Rodape />
     </div>
   );
 }

src/componentes/Banner/banner.js

@@ -1,6 +1,7 @@
 import './banner.css'
 
 function Banner () {
+    //JSX
     return (
         <header className="banner">
             <img src="/imagens/banner.png" alt="banner principal"/>

src/componentes/Colaborador/colaborador.js

@@ -1,9 +1,9 @@
 import './colaborador.css'
 
-const Colaborador = ({nome, imagem, cargo}) => {
+const Colaborador = ({nome, imagem, cargo, corDeFundo}) => {
     return(
         <div className='colaborador'>
-            <div className='cabecalho'>
+            <div className='cabecalho' style={{backgroundColor:corDeFundo}}> 
                 <img src={imagem} alt={nome} />
             </div>
             <div className='rodape'>

src/componentes/ListaSuspensa/ListaSuspensa.js

@@ -2,12 +2,16 @@ import "./ListaSuspensa.css"
 
 
 const ListaSuspensa = (props) => {
-  console.log(props.itens)
-
   return (
     <div className="lista-suspensa">
       <label>{props.label}</label>
-      <select onChange={e => props.aoAlterado(e.target.value)} required={props.required} value={props.value}>
+      <select onChange={e => 
+        props.aoAlterado(e.target.value)} 
+        required={props.required} 
+        value={props.valor}>
+
+        <option value="">Selecione o seu time</option>
+
         {props.itens.map((item) => {
           return <option key={item}>{item}</option>;
         })}

src/componentes/Time/time.js

@@ -5,18 +5,21 @@ const Time = (props) => {
   const css = { backgroundColor: props.corSecundaria };
 
   return (
-    <section className="time" style={css}>
+    (props.colaboradores.length > 0) ? <section className="time" style={css}>
       <h3 style={{ borderColor: props.corPrimaria }}>{props.nome}</h3>
       <div className="colaboradores">
         {props.colaboradores.map((colaborador) => (
           <Colaborador
+            corDeFundo={props.corPrimaria}
+            key={colaborador.nome}
             nome={colaborador.nome}
             cargo={colaborador.cargo}
             imagem={colaborador.imagem}
           />
         ))}
       </div>
     </section>
+    : ''
   );
 };
 

src/componentes/form/form.js

@@ -19,6 +19,10 @@ const Formulario = (props) => {
       imagem,
       time
     })
+    setNome('')
+    setCargo('')
+    setImagem('')
+    setTime('')
   }
 
   return (
@@ -41,7 +45,7 @@ const Formulario = (props) => {
 
         <TextField 
           label="Imagem" 
-          placeholder="Digite o endereço da sua imagem"
+          placeholder="Digite o endereço do seu GitHub + .png"
           valor={imagem} 
           aoAlterado={valor => setImagem(valor)} />
 

src/componentes/rodape/rodape.css

@@ -0,0 +1,17 @@
+.footer {
+    background: #6278F7;
+    color: #FFF;
+    padding: 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.footer ul li {
+    display: flex;
+    margin-right: 20px;
+}
+
+.footer ul li:last-child {
+    margin-right: 0;
+}

src/componentes/rodape/rodape.js

@@ -0,0 +1,35 @@
+import './rodape.css'
+
+const Rodape = () => {
+    return (<footer className="footer">
+        <section>
+            <ul >
+                <li>
+                    <a href="https://github.com/Andresavieira28" target="_blank" rel="noreferrer">
+                        <img src="imagens/GitHub.png" alt="link1" />
+                    </a>
+                </li>
+                <li>
+                    <a href="https://www.linkedin.com/in/andresa-vieira/" target="_blank" rel="noreferrer">
+                        <img src="imagens/linkedin.png" alt="link2" />
+                    </a>
+                </li>
+                <li>
+                    <a href="https://mail.google.com/mail/u/0/?tab=rm&ogbl#inbox" target="_blank" rel="noreferrer">
+                        <img src="imagens/email.png" alt="link3" />
+                    </a>
+                </li>
+            </ul>
+        </section>
+        <section>
+            <img src="/imagens/logo.png" alt="logo" />
+        </section>
+        <section>
+            <p>
+                Desenvolvido por <a href='https://www.linkedin.com/in/andresa-vieira/'>Andresa Vieira</a>
+            </p>
+        </section>
+    </footer>)
+}
+
+export default Rodape