diff --git a/public/imagens/GitHub.png b/public/imagens/GitHub.png new file mode 100644 index 0000000..c096ebd Binary files /dev/null and b/public/imagens/GitHub.png differ diff --git a/public/imagens/email.png b/public/imagens/email.png new file mode 100644 index 0000000..679a1c6 Binary files /dev/null and b/public/imagens/email.png differ diff --git a/public/imagens/linkedin.png b/public/imagens/linkedin.png new file mode 100644 index 0000000..16dca6b Binary files /dev/null and b/public/imagens/linkedin.png differ diff --git a/public/imagens/logo.png b/public/imagens/logo.png new file mode 100644 index 0000000..9353d1f Binary files /dev/null and b/public/imagens/logo.png differ diff --git a/src/App.js b/src/App.js index 5a282fb..7ec1148 100644 --- a/src/App.js +++ b/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)} />)} + + ); } diff --git a/src/componentes/Banner/banner.js b/src/componentes/Banner/banner.js index 0c2fc06..a0b8c14 100644 --- a/src/componentes/Banner/banner.js +++ b/src/componentes/Banner/banner.js @@ -1,6 +1,7 @@ import './banner.css' function Banner () { + //JSX return (
banner principal diff --git a/src/componentes/Colaborador/colaborador.js b/src/componentes/Colaborador/colaborador.js index 3a6d124..1e36fdd 100644 --- a/src/componentes/Colaborador/colaborador.js +++ b/src/componentes/Colaborador/colaborador.js @@ -1,9 +1,9 @@ import './colaborador.css' -const Colaborador = ({nome, imagem, cargo}) => { +const Colaborador = ({nome, imagem, cargo, corDeFundo}) => { return(
-
+
{nome}
diff --git a/src/componentes/ListaSuspensa/ListaSuspensa.js b/src/componentes/ListaSuspensa/ListaSuspensa.js index dfc11a3..fbfdf39 100644 --- a/src/componentes/ListaSuspensa/ListaSuspensa.js +++ b/src/componentes/ListaSuspensa/ListaSuspensa.js @@ -2,12 +2,16 @@ import "./ListaSuspensa.css" const ListaSuspensa = (props) => { - console.log(props.itens) - return (
- + props.aoAlterado(e.target.value)} + required={props.required} + value={props.valor}> + + + {props.itens.map((item) => { return ; })} diff --git a/src/componentes/Time/time.js b/src/componentes/Time/time.js index a2bb56b..f961943 100644 --- a/src/componentes/Time/time.js +++ b/src/componentes/Time/time.js @@ -5,11 +5,13 @@ const Time = (props) => { const css = { backgroundColor: props.corSecundaria }; return ( -
+ (props.colaboradores.length > 0) ?

{props.nome}

{props.colaboradores.map((colaborador) => ( { ))}
+ : '' ); }; diff --git a/src/componentes/form/form.js b/src/componentes/form/form.js index 0773caa..283ef25 100644 --- a/src/componentes/form/form.js +++ b/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) => { setImagem(valor)} /> diff --git a/src/componentes/rodape/rodape.css b/src/componentes/rodape/rodape.css new file mode 100644 index 0000000..07136b4 --- /dev/null +++ b/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; +} diff --git a/src/componentes/rodape/rodape.js b/src/componentes/rodape/rodape.js new file mode 100644 index 0000000..b17c266 --- /dev/null +++ b/src/componentes/rodape/rodape.js @@ -0,0 +1,35 @@ +import './rodape.css' + +const Rodape = () => { + return () +} + +export default Rodape