[Sugestão] Desafio filtros

Boa noite, pessoal :)

Não incluíram o código dos componentes Tags e CampoTexto na resolução do desafio. Envio abaixo como ficou o meu, não sei se é a melhor forma de fazer, mas foi a forma que consegui fazer funcionar rsrs

Componente Tags (incluí a chave 'tag' no arquivo 'tags.json') :

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

const BarraTags = styled.div`
    display: flex;
    align-items: center;
    gap: 64px;
    margin-top: 56px;
`
const TituloTags = styled.p`
    color: #D9D9D9;
    font-size: 24px;
    margin: 0;
`
const Tag = styled.button`
    font-size: 24px;
    color: #FFFFFF;
    background-color:rgba(217, 217, 217, 0.3);
    cursor: pointer;
    transition: background-color 0.3s ease;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 10px;
    border-color: transparent;
    &:hover{
        border-color: #C98CF1;
    }
`
const Div = styled.div`
    display: flex;
    gap: 24px;
    justify-content: end;
`
const Tags = ({ setTag }) => {
    return (
        <BarraTags>
            <TituloTags>Busque por tags:</TituloTags>
            <Div>
                {tags.map(tag => <Tag key={tag.id} onClick={() => setTag(tag.tag)}>{tag.titulo}</Tag>)}
            </Div>
        </BarraTags>
    )
}

export default Tags

Componente CampoTexto:

import { styled } from "styled-components"

const InputContainerEstilizado = styled.div`
    position: relative;
    display: inline-block;
`
const InputEstilizado = styled.input`
    height: 56px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 2px solid;
    border-color: #C98CF1;
    background: transparent;
    box-sizing: border-box;
    width: 566px;
    color: #D9D9D9;
    font-weight: 400;
    font-size: 20px;
    line-height: 20px;
`
const LupaEstilizada = styled.img`
    position: absolute;
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
`
const CampoTexto = ({ setFiltro }) => {

    return (
        <InputContainerEstilizado>
            <InputEstilizado onChange={(evento) => { setFiltro(evento.target.value) }} type="text" placeholder="O que você procura?" />
            <LupaEstilizada src="/icones/search.png" alt="Ícone de lupa" />
        </InputContainerEstilizado>
    )
}

export default CampoTexto

Além disso, notei que na resolução apresentada, os trechos de código relacionados às funcionalidades de favoritar e ampliar as imagens estão diferentes dos desenvolvidos em aula. Isso ficou confuso.