Desafio: barra de populares e modal estilizada

import {styled} from "styled-components"
import BotaoIcone from "../../BotaoIcone"


const Imagem = ({ foto, expandida = false, aoZoomSolicitado}) => {

    let iconeFavorito = '/icones/favorito.png';
    if (foto.favorita) {
        iconeFavorito = '/icones/favorito-ativo.png'
    }


    return (<Figure $expandida={expandida} id={`foto-${foto.id}`}>
        <img src={foto.path} alt={foto.alt} />
        <figcaption>
            <h3>{foto.titulo}</h3>
            <Rodape>
                <h4>{foto.fonte}</h4>
                <BotaoIcone>
                    <img src={iconeFavorito} alt="Icone de favorito" />
                </BotaoIcone>
                {!expandida && <BotaoIcone aria-hidden={expandida} onClick={() => aoZoomSolicitado(foto)}>
                    <img src="/icones/expandir.png" alt="Icone de expandir" />
                </BotaoIcone>}
            </Rodape>
        </figcaption>
    </Figure>)
}

export default Imagem

const Figure = styled.figure`
    width: ${props => props.$expandida ? '90%' : '460px'};
    max-width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    & > img {
        max-width: 100%;
        border-radius: 20px 20px 0 0;
    }
    figcaption {
        background-color: #001634;
        border-radius: 0px 0px 20px 20px;
        color: white;
        box-sizing: border-box;
        padding: 12px;
        h3 {
            font-family: 'GandhiSansBold';
        }
        h4 {
            flex-grow: 1;
        }
        h3, h4 {
            margin: 0;
            font-size: 16px;
        }
    }
`

const Rodape = styled.footer`
    display: flex;
    justify-content: space-between;
    align-items: center;
`

  {fotos.map(foto => <Imagem
                            aoZoomSolicitado={aoFotoSelecionada}
                            key={foto.id}
                            foto={foto} />)
                        }

import {styled} from "styled-components"
import Titulo from "../../Titulo"

import fotos from './fotos-populares.json'

const Populares = () => {
    return (
        <section>
            <Titulo $alinhamento='center'>Populares</Titulo>
            <ColunaFotos>
                {fotos.map(foto => <Imagem key={foto.id} src={foto.path} alt={foto.alt}/>)}
            </ColunaFotos>
            <Botao>Ver mais</Botao>
        </section>
    )
}

export default Populares


const ColunaFotos = styled.section`
    display: flex;
    flex-direction: column;
    gap: 16px;
`

const Imagem = styled.img`
    max-width: 212px;
    border-radius: 20px;
`

const Botao = styled.button`
    background-color: transparent;
    color: #fff;
    border: 2px solid;
    border-color: #C98CF1;
    padding: 12px 20px;
    font-size: 20px;
    border-radius: 10px;
    cursor: pointer;
    width: 100%;
    margin-top: 16px;
`;

[
  {
    "path": "/imagens/populares/foto-1.png",
    "alt": "galáxia",
    "id": 1
  },
  {
    "path": "/imagens/populares/foto-2.png",
    "alt": "lua",
    "id": 2
  },
  {
    "path": "/imagens/populares/foto-3.png",
    "alt": "terra",
    "id": 3
  },
  {
    "path": "/imagens/populares/foto-4.png",
    "alt": "nuvem",
    "id": 4
  },
  {
    "path": "/imagens/populares/foto-5.png",
    "alt": "meteoro",
    "id": 5
  }
]