App.jsx

import styled from "styled-components"
import EstilosGlobais from "./componentes/EstilosGlobais"
import Cabecalho from "./componentes/Cabecalho"
import BaraLateral from "./componentes/BarraLateral"
import Banner from "./componentes/Banner"
import BackgroundImg from "/imagens/banner.png"
import Galeria from "./componentes/Galeria"
import fotos from './fotos.json'
import { useEffect, useState } from "react"
import ModalZoom from "./componentes/ModalZoom"
import Rodape from "./componentes/Rodape"

const FundoGradiente = styled.div`...`
const AppContainer = styled.div`...`
const MainContainer = styled.main`...`
const ConteudoGaleria = styled.section`...`

const App = () => {
  const [fotosDaGaleria, setFotosDaGaleria] = useState(fotos)
  const [fotoSelecionada, setFotoSelecionada] = useState(null)
  const [busca, setBusca] = useState('')
  const [tag, setTags] = useState('')
  const aoAlternarFavorito = (foto) => {
    if (foto.id === fotoSelecionada?.id) {
      setFotoSelecionada({
        ...fotoSelecionada,
        favorita: !fotoSelecionada.favorita
      })      
    }
    setFotosDaGaleria(fotosDaGaleria.map(fotosDaGaleria => {
      return{
        ...fotosDaGaleria,
        favorita: fotosDaGaleria.id === foto.id ? !foto.favorita :fotosDaGaleria.favorita
      }
    }))
  }
  useEffect(() => {
    const resultadosDaBusca = fotos.filter(foto => foto.titulo.toLowerCase().includes(busca.toLowerCase()))
    setFotosDaGaleria(resultadosDaBusca)
  }, [busca])
  useEffect(() => {
    const fotosTag = fotos.filter(foto => !tag || foto.tagId ===tag)
    setFotosDaGaleria(fotosTag)
  },[tag])
  return (
    <FundoGradiente>
      <EstilosGlobais />
      <AppContainer>
        <Cabecalho aoPesquisar={evento =>setBusca(evento)}   />
        <MainContainer>
          <BaraLateral />
          <ConteudoGaleria>
            <Banner
              backgroundImage={BackgroundImg}
              texto={'A galeria mais completa de fotos do espaço'}
            />
            <Galeria 
              aoFiltrar={tag =>setTags(tag)}
              aoFotoSelecionada={foto => setFotoSelecionada(foto)} 
              aoAlternarFavorito={aoAlternarFavorito}
              fotos={fotosDaGaleria} 
            />
          </ConteudoGaleria>
        </MainContainer>
      </AppContainer>
      <ModalZoom 
        foto={fotoSelecionada}
        aoFechar={() => setFotoSelecionada(null)}
        aoAlternarFavorito={aoAlternarFavorito}
      />
      <Rodape />
    </FundoGradiente>
  )
}
export default App

CampoTexto

import styled from "styled-components";
import search from './search.png'

const ContainerEstilizado = styled.div`...`

const CampoTextoEstilizado = styled.input`...`
const IconeLupa = styled.img`...`
const CampoTexto = ({aoPesquisar}) => {
    return (
        <ContainerEstilizado>
            <CampoTextoEstilizado placeholder="O que você procura?" onChange={(evento) => aoPesquisar(evento.target.value)}  />
            <IconeLupa src={search} alt="ícone de lupa" />
        </ContainerEstilizado>
    )
}
export default CampoTexto

Tags

import styled from 'styled-components'
import tags from './tags.json'

const TagsContainer = styled.section`...`

const TagsTitulo = styled.h3`...`
const TagsBtn = styled.button`...`
const Div = styled.div`...`
const Tags = ({aoFiltrar}) => {
    return(
        <TagsContainer>
            <TagsTitulo>Busque por tags:</TagsTitulo>
            <Div>
                {tags.map(tag =><TagsBtn key={tag.id} onClick={()=> aoFiltrar(tag.id)}>{tag.titulo}</TagsBtn>)} 
            </Div>
        </TagsContainer>
    )
}
export default Tags

Componente Rodape

import styled from "styled-components"

const Footer = styled.footer`
    background-color: #04244F;  
    width:100%;
    height: 80px;
    margin-top: 73px;
    display: flex;
    justify-content: space-between;
    align-items: center;
`
 const RedesSociais = styled.div`
    display: flex;
    align-items: center;
    gap: 34px;
    padding-top: 5px;
    margin-left: 30px;
`
const Registro = styled.h3`
    color: #fff;
    font-size: 16px;   
    margin-right: 30px;
`
const Rodape = () => {
    return(
        <Footer>            
                <RedesSociais>
                    <a>
                        <img src="./imagens/sociais/facebook.svg"/>
                    </a>
                    <a>
                        <img src="./imagens/sociais/twitter.svg"/>
                    </a>
                    <a>
                        <img src="./imagens/sociais/instagram.svg"/>
                    </a>
                </RedesSociais>
                <Registro>Desenvolvido por Alura</Registro>           
        </Footer>
    )
}
export default Rodape

Link para repositório: https://github.com/daviizui/styledComponentesArquivosEstaticos