Executando verificação de segurança...
11
mthcalixto
2 min de leitura ·

O Redesign do TabNews #2

Recentemente eu fiz uma postagem do Redesign do TabNews, primeiro fiz um conceito e acabei gostando de como ficou e recebi alguns comentários positivos sobre isso e achei incrível, por isso acabei também fazendo um deploy na vercel passando o conceito do redesign para Next.js.

Acabei usando alguns pacotes que encontrei como o react-twc que você consegue fazer igual o styled-components, consegue estilizar o componente passando as classnames em outro arquivo e isso torna o código muito mais organizado.

Usei o @tanstack/react-query para fazer o infinite scroll e é incrível trabalhar com ele.

Algumas coisas que acabei adicionando nesse conceito foi as informações de tabcoins dos posts:

Tabcoins padrão:
img padrão tabcoins

Tabcoins negativo:
img negativo tabcoins

Tabcoins populares:
img popular tabcoins

Outra coisa que eu pensei em adicionar foi o "ADS" tipo anúncios pagos para monetizar o TabNews, como pode vê a ideia é colocar esses anúncios e informar que ele é um anúncio:
img trending ads

Também fiz com que os títulos que contém "[]" por exemplo, "[Pitch]" tenha um background tipo um badge, então o título que cotém colchetes é convertido para um "span" no html e estilizado:

[Pitch]:
img badge 1
[Dúvida]:
img badge 2

Acredito que o conceito precisa ser mais elaborado para atender todas necessidades, enfim caso queira dar uma olhada:

Deploy:
https://redesign-tabnews.vercel.app/

Código GitHub:
https://github.com/mthmcalixto/redesign-tabnews.com.br

Carregando publicação patrocinada...
4
rafael

mthcalixto, suas sugestões tem pontos que podem ser aproveitados futuramente. Por que não comenta nos issues relacionados no repositório do TabNews? Por exemplo:

Vale lembrar que, para considerar a implementação de algo assim no TabNews, é importante testar como fica em telas menores. Hoje já existe uma certa limitação de espaço que impediria a adição de ícones em telas pequenas, e complicaria a adição de uma nova informação, como visualizações.

Outro ponto considerado é a estilização do TabNews, que é com base no Primer, o design system do GitHub. Então as tags provavelmente acabarão usando os componentes Label ou State label (este último é parecido com sua sugestão, porém mais arredondado).

2
mthcalixto
Autor
Autor

rafael, valeu pelo comentário, eu as vezes estou sempre por lá discutindo sobre novas implementações, eu entendo que uma implementação desse tipo no TabNews é complexa e vale mais a pena começar do zero do que tentar algo parecido.

Mas é bom vê como ficaria se essas implementações fossem implemtadas como as Tags, Banner e as visuzalições que acho importante ter.

Em questão do Mobile é tudo questão de saber o que colocar mesmo, no redesign tentei ajeitar o máximo de informações possíves.

3
hellitonsm

Gostei desse negócio de badge. Mal entrei no site, já me acostumei e não quero voltar atrás.

Melhor ainda se os badge ajudar também a encontrar outros bagdes como se fosse uma TAG.

1
mthcalixto
Autor
Autor

hellitonsm, valeu pelo comentário, realmente os badge faz um diferença mesmo, acredito que logo vão adicionar oficialmente no TabNews.

1
cerqueirinha

Tá ficando muito bom seu projeto , acredito que serviria de base para um projeto mais pra frente "originalmente" seu . No mais é isso, dei uma estrela no repositório para ajudar .

1
mthcalixto
Autor
Autor

cerqueirinha, agradeço pelo comentário mano, eu apenas estou brincando pra falar a verdade, testando alguns pacotes novos como o react-twc e achei incrível ele, eu usava o twin.macro mas ele parou de funcionar com versão mais recente do Next.js e obrigado pela estrela no repositório hahah!

0
-2
-1