componente dos times

src/App.js

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import Banner from './componentes/Banner/banner';
 import Form from './componentes/form/form'
+import Time from './componentes/Time/time';
 
 function App() {
 
@@ -11,10 +12,55 @@ function App() {
     setColaboradores ([...colaboradores,colaborador])
   }
 
+  const times = [
+    {
+      nome: 'Programação',
+      corPrimaria: '#57C278',
+      corSecundaria: '#D9F7E9',
+    },
+    {
+      nome: 'Front-End',
+      corPrimaria: '#82CFFA',
+      corSecundaria: '#E8F8FF',
+    },
+    {
+      nome: 'Back-End',
+      corPrimaria: '#ffc26c',
+      corSecundaria: '#fff0da',
+    },
+    {
+      nome: 'Data Sciense',
+      corPrimaria: '#A6D157',
+      corSecundaria: '#F0F8E2',
+    },
+    {
+      nome: 'Devops',
+      corPrimaria: '#E06B69',
+      corSecundaria: '#FDE7E8',
+    },
+    {
+      nome: 'UX e Design',
+      corPrimaria: '#D86EBF',
+      corSecundaria: '#FAE5F5',
+    },
+   {
+      nome: 'Mobile',
+      corPrimaria: '#FEBA05',
+      corSecundaria: '#FFF5D9',
+   },
+   {
+      nome: 'Inovação e Gestão',
+      corPrimaria: '#FF8A29',
+      corSecundaria: '#FFEEDF',
+   }
+
+  ]
+
   return (
     <div className="App">
       <Banner />
-      <Form aoColaboradorCadastrado = {colaboorador => aoNovoColaboradorAdd(colaboorador)}  />
+      <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} />)}
     </div>
   );
 }

src/componentes/Time/time.css

@@ -0,0 +1,18 @@
+.time {
+    text-align: center;
+    padding: 32px;
+}
+
+.time h3 {
+    font-size: 32px;
+    border-bottom: 4px solid;
+    display: inline-block;
+    padding-bottom: 8px;
+}
+
+.time.colaboradores {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 32px;
+    flex-wrap: wrap;
+}

src/componentes/Time/time.js

@@ -0,0 +1,14 @@
+import './time.css'
+
+const Time = (props) => {
+
+    const css = {backgroundColor:props.corSecundaria}
+
+    return(
+        <section className='time' style={css}>
+            <h3 style={{borderColor: props.corPrimaria}}>{props.nome}</h3>
+        </section>
+    )
+}
+
+export default Time

src/componentes/form/form.js

@@ -6,14 +6,6 @@ import { useState } from "react";
 
 const Formulario = (props) => {
 
-  const times = ['Programação',
-  'Front-End',
-  'Data Science',
-  'Devops',
-  'UX e Design',
-  'Mobile',
-  'Inovação e Gestão']
-
   const [nome, setNome] = useState('')
   const [cargo, setCargo] = useState('')
   const [imagem, setImagem] = useState('')
@@ -56,7 +48,7 @@ const Formulario = (props) => {
         <ListaSuspensa 
           obrigatorio={true} 
           label="Time"
-          itens={times}
+          itens={props.times}
           valor = {time}
           aoAlterado= {valor => setTime(valor)}
           />