Desafio resolvido

Olá.

Nesta aula foi sugerido como desafio fazer com que a interface ColaboradorProps recebesse um colaborador e uma corDeFundo.

Decidi tentar resolver este desafio. Criei um colaborador como sendo do tipo IColaborador e refatorei o uso das props para utilizar este colaborador. Depois, na definição do componente de Time, refatorei <Colaborador /> para utilizar as props no novo formato.

Imagino que, futuramente, se mais algum código do projeto chamar <Colaborador /> tenha que ser feito essa modificação também, o que poderia ser muito ruim em projetos muito grandes. Neste caso, não sei qual seria a melhor abordagem.

Segue como ficou o código:

Colaborador/index.tsx

import { IColaborador } from '../../shared/interfaces/IColaborador'
import './Colaborador.css'

interface ColaboradorProps {
    colaborador: IColaborador;
    corDeFundo: string;
}

const Colaborador = ({ colaborador, corDeFundo }: ColaboradorProps) => {
    return (<div className='colaborador'>
        <div className='cabecalho' style={{ backgroundColor: corDeFundo }}>
            <img src={colaborador.imagem} alt={colaborador.nome}/>
        </div>
        <div className='rodape'>
            <h4>{colaborador.nome}</h4>
            <h5>{colaborador.cargo}</h5>
        </div>
    </div>)
}

export default Colaborador

Time/index.tsx

import { IColaborador } from '../../shared/interfaces/IColaborador';
import Colaborador from '../Colaborador'
import './Time.css'

interface TimeProps {
    corPrimaria: string;
    corSecundaria: string;
    nome: string;
    colaboradores: IColaborador[] // notação para indicar que é um array
}

const Time = (props: TimeProps) => {
    const css = { backgroundColor: props.corSecundaria }

    return (
        (props.colaboradores.length > 0) ? <section className='time' style={css}>
            <h3 style={{ borderColor: props.corPrimaria }}>{props.nome}</h3>
            <div className='colaboradores'>
                {props.colaboradores.map( colaborador => 
                    <Colaborador 
                        corDeFundo={props.corPrimaria} 
                        key={colaborador.nome} 
                        colaborador={colaborador}
                    /> 
                )}
            </div>
        </section> 
        : ''
    )
}

export default Time