Como poderia adaptar o backgroundColor para um backgroundImage, tanto no App.js quanto no index.js do Time?
Como poderia adaptar o backgroundColor para um backgroundImage, tanto no App.js quanto no index.js do Time?
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: Espero ter ajudado.