import styled from 'styled-components'
import tags from './tags.json'
const StyledContainer = styled.nav`
display: flex;
align-items: center;
gap: 24px;
margin-top: 56px;
`
const StyledTitleTags = styled.h3`
width: 219px;
font-size: 24px;
color: #D9D9D9;
`
const StyledButton = styled.button`
padding: 12px 16px;
border-radius: 8px;
background: rgba(217, 217, 217, 0.3);
color: #FFFFFF;
cursor: pointer;
border: none;
&:hover {
border: 2px solid #C98CF1;
}
`
const Tags = () => {
return <StyledContainer>
<StyledTitleTags>Busque por tags:</StyledTitleTags>
{tags.map(tag => <StyledButton key={tag.id}>{tag.titulo}</StyledButton>)}
</StyledContainer>
}
export default Tags
Para saber mais:
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!