From ba7495a908b790a5f1b7b5de40f9cce160e8fa50 Mon Sep 17 00:00:00 2001
From: Paul Valladares <85648028+dreyfus92@users.noreply.github.com>
Date: Fri, 24 Nov 2023 12:06:38 -0600
Subject: [PATCH] i18n(es): update `components` (#1137)

Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com>
---
 docs/src/content/docs/es/guides/components.mdx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/docs/src/content/docs/es/guides/components.mdx b/docs/src/content/docs/es/guides/components.mdx
index 3bb6762af4f..3dbb746e3f0 100644
--- a/docs/src/content/docs/es/guides/components.mdx
+++ b/docs/src/content/docs/es/guides/components.mdx
@@ -13,7 +13,7 @@ Puedes utilizar un componente importándolo en tu archivo MDX y luego renderizá
 
 ```mdx
 ---
-# src/content/docs/index.mdx
+# src/content/docs/example.mdx
 title: Bienvenido a mis docs
 ---
 
@@ -51,7 +51,7 @@ Si estos estilos entran en conflicto con la apariencia de tu componente, estable
 Starlight aplica estilos predeterminados a tu contenido en Markdown, por ejemplo, añadiendo margen entre elementos.
 Si estos estilos entran en conflicto con la apariencia de tu componente, establece la clase `not-content` en tu componente para deshabilitarlos.
 
-```astro
+```astro 'class="not-content"'
 ---
 // src/components/Ejemplo.astro
 ---
@@ -74,6 +74,8 @@ import { Tabs, TabItem } from '@astrojs/starlight/components';
 Puedes mostrar una interfaz con pestañas utilizando los componentes `<Tabs>` y `<TabItem>`. Cada `<TabItem>` debe tener una `label` que se mostrará a los usuarios.
 
 ```mdx
+# src/content/docs/example.mdx
+
 import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 <Tabs>
@@ -98,6 +100,8 @@ Puedes mostrar contenido en una caja que coincida con los estilos de Starlight u
 El componente `<Card>` requiere un `title` y opcionalmente puede incluir un atributo `icon` establecido con el nombre de [uno de los iconos integrados de Starlight](#todos-los-iconos).
 
 ```mdx
+# src/content/docs/example.mdx
+
 import { Card, CardGrid } from '@astrojs/starlight/components';
 
 <Card title="¡Echa un vistazo a esto!">
@@ -149,6 +153,8 @@ Un `<LinkCard>` requiere un `title` y un atributo [`href`](https://developer.moz
 Agrupa varios componentes `<LinkCard>` en `<CardGrid>` para mostrar las tarjetas una al lado de la otra cuando hay suficiente espacio.
 
 ```mdx
+# src/content/docs/example.mdx
+
 import { LinkCard, CardGrid } from '@astrojs/starlight/components';
 
 <LinkCard
@@ -194,6 +200,8 @@ Starlight proporciona un conjunto de iconos comunes que puedes mostrar en tu con
 Cada `<Icon>` requiere un atributo `name` que se puede encontrar en la lista de [todos los iconos](#todos-los-iconos), y opcionalmente puede incluir atributos como `label`, `size` y `color`.
 
 ```mdx
+# src/content/docs/example.mdx
+
 import { Icon } from '@astrojs/starlight/components';
 
 <Icon name="star" color="goldenrod" size="2rem" />