Solucionado
import { Link } from 'react-router-dom'
import styles from './HeaderLink.module.css'
function HeaderLink({ url, children }){
return(
<Link to={url} className={styles.headerLink}>
{children}
</Link>
)
}
export default HeaderLink;
.headerLink {
color: var(--branco);
font-size: 18px;
font-weight: 400;
padding: 1em;
text-decoration: none;
}```
Olá, Herlon!
Analisando o seu código, parece estar tudo correto e não deveria haver nada do tipo.
Uma solução possível para isso seria adicionar uma regra de estilo para remover o negrito dos links quando eles apontam para a página atual. Você pode fazer isso adicionando a seguinte regra CSS ao seu arquivo HeaderLink.module.css:
.headerLink {
color: var(--branco);
font-size: 18px;
font-weight: 400;
padding: 1em;
text-decoration: none;
}
.headerLink:active, .headerLink:visited {
font-weight: normal;
}
Essa regra define o font-weight como normal para os links ativos (:active) e visitados (:visited), o que deve remover o negrito.
Peço que teste essa sugestão e, em caso de persistência, compartilhe um print da sua tela e o link do seu repositório com o projeto completo, para que eu possa fornecer uma resposta mais assertiva.
Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!
Sucesso ✨
Um grande abraço e até mais!
Bom dia, não deu certo
https://github.com/einnovationline/cinetag
e quando marco o home e o favoritos 
Tbm não está importando as imagens, coloquei um console.log e elas estão vindo, mas não aparecem na imagem
Olá Herlon!
Para estilizar os links, você pode adicionar as seguintes tags em seu código, na pasta HeaderProject e no index,js:
<nav>
<HeaderLink url="./" class="home-link">Home</HeaderLink>
<HeaderLink url="./Favorites" class="favorites-link">Favorites</HeaderLink>
</nav>
E no seu CSS HeaderProject.module.css adicione as seguintes linhas:
.home-link, .favorites-link {
color: white;
/* Outras estilizações que voce quiser*/
}
Já a questão da imagem apenas utilizando o código da aula funcionou, o seu código passa props como um objeto para a função Card, enquanto o código da aula as desestrutura diretamente, o que funcionou normalmente aqui.
import styles from './Card.module.css';
import iconeFavoritar from './favoritar.png';
function Card({ id, titulo, capa }) {
return (
<div className={styles.container}>
<img src={capa} alt={titulo} className={styles.capa} />
<h2>{titulo}</h2>
<img src={iconeFavoritar}
alt="Favoritar filme"
className={styles.favoritar} />
</div>
)
}
export default Card;
E o seu CSS(Card.module.css), fica assim:
.container {
padding: 0 0 1em 0;
margin-top: .5em;
width: 282px;
background-color: var(--cinza);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.cover {
width: 100%;
}
.container h2, .favoritar {
padding: 0 1em;
}
.favoritar {
width: 25px;
}
Espero ter ajudado. Abraços!
Bom dia, não funcionou a questão do home e favoritos estarem em negrito
Olá Herlon!
Perdão acabei pulando essa parte, mas os demais erros, foram reparados certo?
Quanto ao negrito, não estou enfrentando esse erro, mas você pode tentar resolver isso adicionando o font-weight: normal na class .headerLink, no arquivo HeaderLink.module.css:
.headerLink {
color: var(--branco);
font-size: 18px;
font-weight: 400;
padding: 1em;
text-decoration: none;
font-weight: normal; /* Nova linha adicionada */
}
O projeto com essas mudanças ficaram assim:
Espero ter ajudado!