1
resposta

backgroundImage

Como poderia adaptar o backgroundColor para um backgroundImage, tanto no App.js quanto no index.js do Time?

1 resposta

Olá Henrique.

Você pode fazer da seguinte forma:

No arquivo App.js, onde consta a lista de times, você pode colocar uma nova propriedade em cada time com o link da imagem que voce deseja que cada time receba como background, exemplo:

//App.js

function App() {
    ...
    const times = [
        {
          nome: 'Programação',
          corPrimaria: '#57C278',
          corSecundaria: '#D9F7E9', 
          imageFundo: 'https://link-da-imagem...
        },
        {
          nome: 'Front-End',
          corPrimaria: '#82CFFA',
          corSecundaria: '#E8F8FF',
          imagemFundo: '/imagens/fundo.png',
        },
       ...
      ];
 }

Em seguida, você precisa passar como props no componente Time:

//App.js

function App() {
    ...

    return (
        ...
        {times.map(time => (
        <Time 
          key={time.nome} 
          nome={time.nome}
          imagemFundo={time.imagemFundo}
          corPrimaria={time.corPrimaria}
          corSecundaria={time.corSecundaria}
          colaboradores={colaboradores.filter(colaborador => colaborador.time === time.nome)}
        />
      ))}
    );

}

Após isso, dentro do index.js do componente Time você pode acrescentar o backgroundImage da seguinte forma:

//componentes/Time/index.js
const Time = (props) => {
  return (
    props.colaboradores.length > 0 &&
    <section className='time' style={{
        backgroundColor: props.corSecundaria,
        backgroundImage:`url(${props.imagemFundo})`
    }}>
        ...
    </section>
  );
};

Feito isso, você pode fazer alguns ajustes no seu css pra posicionar da maneira que deseja. Exemplo:

//Time.css

.time {
  text-align: center;
  padding: 32px;

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

O resultado seria mais ou menos assim: Insira aqui a descrição dessa imagem para ajudar na acessibilidadeEspero ter ajudado.