i18n(pt-BR): Translate `components.mdx` (#508)

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

1 files changed, 196 insertions, 0 deletions

diff --git a/docs/src/content/docs/pt-br/guides/components.mdx b/docs/src/content/docs/pt-br/guides/components.mdx
new file mode 100644
index 00000000..8d717575
--- /dev/null
+++ b/docs/src/content/docs/pt-br/guides/components.mdx
@@ -0,0 +1,196 @@
+---
+title: Componentes
+description: Utilizando componentes no MDX com Starlight.
+---
+
+Componentes te permitem facilmente reutilizar pedaços da UI ou estilizar consistentemente.
+Alguns exemplos são um cartão de link ou um embed do YouTube.
+Starlight suporta o uso de componentes em arquivos [MDX](https://mdxjs.com/) e providencia alguns components comuns para você utilizar.
+
+[Aprenda mais sobre como construir componentes na documentação do Astro](https://docs.astro.build/pt-br/core-concepts/astro-components/).
+
+## Utilizando um componente
+
+Você pode utilizar um componente ao importá-lo em seu arquivo MDX e então renderizá-lo como uma tag JSX.
+
+Elas se parecem com tags HTML porém começam com uma letra maiúscula correspondente ao nome na sua declaração `import`:
+
+```mdx
+---
+# src/content/docs/index.mdx
+title: Bem-vindo a minha documentação
+---
+
+import AlgumComponente from '../../components/AlgumComponente.astro';
+import OutroComponente from '../../components/OutroComponente.astro';
+
+<AlgumComponente prop="algo" />
+
+<OutroComponente>
+	Componentes também podem conter **conteúdo aninhado**.
+</OutroComponente>
+```
+
+Já que Starlight é feito com Astro, você pode adicionar suporte para componentes feitos com qualquer [framework de UI suportado (React, Preact, Svelte, Vue, Solid, Lit e Alpine)](https://docs.astro.build/pt-br/core-concepts/framework-components/) em seus arquivos MDX.
+Aprenda mais sobre como [utilizar componentes no MDX](https://docs.astro.build/pt-br/guides/markdown-content/#usando-componentes-no-mdx) na documentação do Astro.
+
+### Compatibilidade com os estilos do Starlight
+
+Starlight aplica estilos padrões para seu conteúdo Markdown, como por exemplo, adicionando margem entre elementos.
+Se esses estilos conflitam com a aparência do seu componente, defina a classe `not-content` no seu componente para desabilitá-los.
+
+```astro
+---
+// src/components/Exemplo.astro
+---
+
+<div class="not-content">
+	<p>Não é impactado pelos estilos padrões de conteúdo do Starlight.</p>
+</div>
+```
+
+## Componentes integrados
+
+Starlight providencia alguns componentes integrados para casos de uso comuns em documentações.
+Esses componentes estão disponíveis através do pacote `@astrojs/starlight/components`.
+
+### Abas
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+Você pode mostrar uma interface com abas utilizando os componentes `<Tabs>` e `<TabItem>`.
+Cada `<TabItem>` tem que ter uma `label` para mostrar aos usuários.
+
+```mdx
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+<Tabs>
+	<TabItem label="Estrelas">Sirius, Vega, Betelgeuse</TabItem>
+	<TabItem label="Luas">Io, Europa, Ganymede</TabItem>
+</Tabs>
+```
+
+O código acima gera as seguintes abas na página:
+
+<Tabs>
+	<TabItem label="Estrelas">Sirius, Vega, Betelgeuse</TabItem>
+	<TabItem label="Luas">Io, Europa, Ganymede</TabItem>
+</Tabs>
+
+### Cartões
+
+import { Card, CardGrid } from '@astrojs/starlight/components';
+
+Você pode mostrar conteúdo em uma caixa seguindo os estilos do Starlight utilizando o componente `<Card>`.
+Coloque múltiplos cartões no componente `<CardGrid>` para mostrar cartões lado a lado quando houver espaço suficiente.
+
+Um `<Card>` precisa de um `title` e pode opcionalmente incluir o atributo `icon` para definir o nome de um dos [ícones integrados do Starlight](#all-icons).
+
+```mdx
+import { Card, CardGrid } from '@astrojs/starlight/components';
+
+<Card title="Veja isso">Conteúdo interessante que você quer destacar.</Card>
+
+<CardGrid>
+	<Card title="Estrelas" icon="star">
+		Sirius, Vega, Betelgeuse
+	</Card>
+	<Card title="Luas" icon="moon">
+		Io, Europa, Ganymede
+	</Card>
+</CardGrid>
+```
+
+O código acima gera o seguinte na página:
+
+<Card title="Veja isso">Conteúdo interessante que você quer destacar.</Card>
+
+<CardGrid>
+	<Card title="Estrelas" icon="star">
+		Sirius, Vega, Betelgeuse
+	</Card>
+	<Card title="Luas" icon="moon">
+		Io, Europa, Ganymede
+	</Card>
+</CardGrid>
+
+:::tip
+Utilize um grid de cartões na sua página inicial para mostrar as principais funcionalidades do seu projeto.
+Adicione o atributo `stagger` para mover a segunda coluna de cartões verticalmente para adicionar interesse visual:
+
+```astro
+<CardGrid stagger>
+	<!-- cartões -->
+</CardGrid>
+```
+
+:::
+
+### Cartões de Link
+
+Utilize o componente `<LinkCard>` para fazer um link proeminente para outras páginas.
+
+Um `<LinkCard>` precisa de um `title` e um atributo [`href`](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/a#attr-href). Você pode opcionalmente incluir uma pequena `description` ou outros atributos de link como `target`.
+
+Agrupe múltiplos componentes `<LinkCard>` em `<CardGrid>` para mostrar cartões lado a lado quando houver espaço suficiente.
+
+```mdx
+import { LinkCard, CardGrid } from '@astrojs/starlight/components';
+
+<LinkCard
+	title="Customizando Starlight"
+	description="Aprenda como fazer seu site Starlight único com estilos customizados, fontes e mais."
+	href="/pt-br/guides/customization/"
+/>
+
+<CardGrid>
+	<LinkCard
+		title="Escrevendo Markdown"
+		href="/pt-br/guides/authoring-content/"
+	/>
+	<LinkCard title="Componentes" href="/pt-br/guides/components/" />
+</CardGrid>
+```
+
+O código acima gera o seguinte na página:
+
+import { LinkCard } from '@astrojs/starlight/components';
+
+<LinkCard
+	title="Customizando Starlight"
+	description="Aprenda como fazer seu site Starlight único com estilos customizados, fontes e mais."
+	href="/pt-br/guides/customization/"
+/>
+
+<CardGrid>
+	<LinkCard
+		title="Escrevendo Markdown"
+		href="/pt-br/guides/authoring-content/"
+	/>
+	<LinkCard title="Componentes" href="/pt-br/guides/components/" />
+</CardGrid>
+
+### Ícone
+
+import { Icon } from '@astrojs/starlight/components';
+import IconsList from '../../../../components/icons-list.astro';
+
+Starlight providencia um conjunto comum de ícones que você pode mostrar em seu conteúdo utilizando o componente `<Icon>`.
+
+Cada `<Icon>` requer um [`name`](#todos-os-ícones) e pode opcionalmente incluir um atributo `label`, `size` e `color`.
+
+```mdx
+import { Icon } from '@astrojs/starlight/components';
+
+<Icon name="star" color="goldenrod" size="2rem" />
+```
+
+O código acima gera o seguinte na página:
+
+<Icon name="star" color="goldenrod" size="2rem" />
+
+#### Todos os ícones
+
+Uma lista de todos os ícones disponíveis é mostrada abaixo com seus nomes associados. Clique em um ícone para copiar o código do componente dele.
+
+<IconsList />