npm i aula-alura-davi-rss
Copie e cole no terminal
- AbBotão
texto*: Texto que vai estar dentro do botão tipo*: "primario" (Fundo amarelo) ou "secundario"(Fundo branco) onClick: Função onclick
import { AbBotao } from "aula-alura-davi-rss";
<AbBotao
texto="Seu Texto"
onClick = () => null
tipo: primario
/> ;
- AbCampoTexto
label*: Texto em cima do campo placeholder: Texto quando o campo estiver vazio type*: "text", "email", "password" ou "date" value*: Valor digitado dentro do campo onChange*: (value: string) => void
import { AbCampoTexto } from "aula-alura-davi-rss";
<AbCampoTexto
label: Email
placeholder: "Digite seu Email..."
type: email
onChange: (value: string) => void
/> ;
- AbCard
Card com qualquer coisa dentro
import { AbCard } from "aula-alura-davi-rss";
<AbCard>
<h1>Titulo card</h1>
<p>Conteudo card</p>
</AbCard>
- AbGrupoOpcoes
valorPadrao: card selecionado opcoes*: Opções com id, titulo, corpo e rodapé do grupo. onChange: ((opcao: AbGrupoOpcao) => void)
import { AbGrupoOpcoes } from "aula-alura-davi-rss";
opcoes:
[
{
"id": 2,
"title": "Impresso",
"corpo": "R$ 00,00",
"rodape": ".pdf, .epub, .sob"
},
{
"id": 3,
"title": "Impresso + E-Book",
"corpo": "R$ 00,00",
"rodape": ".pdf, .epub, .sob"
}
]
<AbGrupoOpcoes opcoes={opcoes} valorPadrao={opcao.id === 3} onChange= ((opcao: AbGrupoOpcao) => void) />
- AbQuantidade
Div com número e botões para adicionar ou subtrair um
label: texto em cima dos botões onChange: ((value: number) => void)
import { AbQuantidade } from "aula-alura-davi-rss";
<AbQuantidade label="Quantidade" onChange={onChange((value: number) => void)}/>
- AbTags
Tag para organizar
texto: texto da tag
import { AbTags } from "aula-alura-davi-rss";
<AbTags texto="Tag"/>
HTML
styled-components
TypeScript
React
NPM
Davi Reghim de Salles Santana https://www.linkedin.com/in/davi-reghim-13b995272/