Merge pull request #6 from Andresavieira28/build

Build

README.md

@@ -68,3 +68,5 @@ This section has moved here: [https://facebook.github.io/create-react-app/docs/d
 ### `npm run build` fails to minify
 
 This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+
+add config de build

src/App.js

@@ -5,7 +5,7 @@ import Time from './componentes/Time/time';
 
 function App() {
 
-  const [colaboradores, setColaboradores] = useState('');
+  const [colaboradores, setColaboradores] = useState([]);
 
   const aoNovoColaboradorAdd = (colaborador) => {
     console.log(colaborador);
@@ -59,8 +59,16 @@ function App() {
   return (
     <div className="App">
       <Banner />
+
       <Form times={times.map(time => time.nome)} aoColaboradorCadastrado = {colaboorador => aoNovoColaboradorAdd(colaboorador)}/>
-      {times.map(time => <Time key={time.nome} nome= {time.nome} corPrimaria={time.corPrimaria} corSecundaria={time.corSecundaria} />)}
+
+      {times.map(time => <Time 
+        key={time.nome}
+        nome= {time.nome}
+        corPrimaria={time.corPrimaria}
+        corSecundaria={time.corSecundaria}
+        colaboradores={colaboradores}
+      />)}
     </div>
   );
 }

src/componentes/Colaborador/colaborador.css

@@ -0,0 +1,43 @@
+.colaborador {
+    width: 280px;
+}
+
+.colaborador .cabecalho {
+    background-color:  #F0F0F0;
+    border-radius: 10px 10px 0px 0px;
+}
+.colaborador img {
+    width: 100px;
+    border-radius: 50%;
+    position: relative;
+    bottom: -50px;
+}
+
+.colaborador .rodape {
+    background: #FFFFFF;
+    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.08);
+    border-radius: 0px 0px 10px 10px;
+    padding-top: 90px;
+    padding-bottom: 40px;
+}
+
+.colaborador .rodape h4 {
+    color: #6278F7;
+    font-size: 18px;
+    line-height: 22px;
+    font-weight: bold;
+    margin-bottom: 8px;
+}
+
+.colaborador .rodape h5 {
+    font-size: 18px;
+    line-height: 22px;
+    color: #212121;
+    padding: 0 16px;
+}
+.time .colaboradoes {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 32px;
+    flex-wrap: wrap;
+}

src/componentes/Colaborador/colaborador.js

@@ -0,0 +1,17 @@
+import './colaborador.css'
+
+const Colaborador = ({nome, imagem, cargo}) => {
+    return(
+        <div className='colaborador'>
+            <div className='cabecalho'>
+                <img src={imagem} alt={nome} />
+            </div>
+            <div className='rodape'>
+                <h4>{nome}</h4>
+                <h5>{cargo}</h5>
+            </div>
+        </div>
+    )
+}
+
+export default Colaborador

src/componentes/Time/time.js

@@ -1,14 +1,23 @@
-import './time.css'
+import Colaborador from "../Colaborador/colaborador";
+import "./time.css";
 
 const Time = (props) => {
+  const css = { backgroundColor: props.corSecundaria };
 
-    const css = {backgroundColor:props.corSecundaria}
+  return (
+    <section className="time" style={css}>
+      <h3 style={{ borderColor: props.corPrimaria }}>{props.nome}</h3>
+      <div className="colaboradores">
+        {props.colaboradores.map((colaborador) => (
+          <Colaborador
+            nome={colaborador.nome}
+            cargo={colaborador.cargo}
+            imagem={colaborador.imagem}
+          />
+        ))}
+      </div>
+    </section>
+  );
+};
 
-    return(
-        <section className='time' style={css}>
-            <h3 style={{borderColor: props.corPrimaria}}>{props.nome}</h3>
-        </section>
-    )
-}
-
-export default Time
+export default Time;