[Dúvida] Adicionando gradiente na cor da borda...

Olá Vinícius! Tudo bem contigo?

Você está no caminho certo para desenvolver essa feature.

Se você quiser compartilhar seu projeto comigo, é só colocar ele no Github e me mandar o link, assim eu posso fazer o download e testar algumas soluções por aqui para lhe auxiliar se você quiser.

Era isso, abraços e bons estudos.

Bom dia amigo, acabei deixando por isso mesmo pra dar prosseguindo ao curso, mas vou lhe deixar o meu repositório pra você dar uma olhada se for do seu interesse... Repo: https://github.com/viniciussis/Space_App live: https://space-app-sooty.vercel.app/

Olá Vinícius! Tudo ok contigo?

Eu estava testando aqui algumas ideias, e a tarefa se provou de certa forma um pouco trabalhosa, então buscando por soluções, encontrei esse artigo com várias soluções incríveis para resolver parte do problema:

• Rounded gradient borders in CSS;

E se quiser uma dica eu sugiro que crie um componente span estilizado e renderize ele dentro do map, isso funciona, mas tem algumas limitações. O melhor resultado que consegui foi esse:

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

const StyledPara = styled.p`
  color: white;
  display: inline-flex;
  font-size: 1.25rem;
  gap: 0.75rem;
  align-items: center;
`;

const StyledTag = styled.button`
  border: 2px solid ${props => props.$selected ? '#A482EB' : "transparent"};
  background-color: #d9d9d932;
  border-radius: 0.5rem;
  font-size: 1.5rem;
  padding: 0.35rem 0.75rem;
  transition: 0.5s;
  cursor: pointer;
  background: transparent;
  padding: 0.5rem 1rem;
  background-image: linear-gradient(90deg, white, white),
    linear-gradient(90deg, hsl(289, 65%, 64%), hsl(226, 78%, 67%));
  background-clip: padding-box, border-box;
  background-origin: border-box;
  border-radius: 1.75rem;
`;

const StyledLabel = styled.span`
  background-image: linear-gradient(
    90deg,
    hsl(289, 65%, 64%),
    hsl(226, 78%, 67%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.5rem;
`;

const Tags = ({ tagSelected, onSelectingTag }) => {
  return (
    <StyledPara>Busque por tags:
      {tags.map(tag =>
        <StyledTag
          $selected={tagSelected.id === tag.id}
          onClick={() => onSelectingTag(tag)}
          key={tag.id}
        >
          <StyledLabel>{tag.titulo}</StyledLabel>
        </StyledTag>
      )}
    </StyledPara>
  )
}

export default Tags;

O problema é que quando clicamos em uma tag ela não fica muito destacada, mas isso deixo de desafio!

Era isso, infelizmente nem sempre podemos seguir a risca o design do Figma, e esse caso é um deles. Então, só para contextualizar, é importante entender que as propriedades border-image e border-radius não são compatíveis entre si. Dessa forma, para aplicar o botão com a borda arredondada e usando degradê, não é impossível, mas também não é tão simples. A leitura do artigo que passei acima pode ajudar muito, portanto recomendo fortemente a leitura dele.

Se precisar conte com o fórum!

Abraços e bons estudos.