Translation of some sandboxes (#861)

* Translation of some sandboxes

* Update src/content/learn/adding-interactivity.md

* Update src/content/learn/adding-interactivity.md

* Update src/content/learn/passing-data-deeply-with-context.md

* Update src/content/learn/passing-data-deeply-with-context.md

Author: NGHdeveloper

content/docs/concurrent-mode-patterns.md

@@ -625,7 +625,7 @@ Cuando diseñas componentes de React, comúnmente es mejor encontrar la "represe
 Sin embargo, en Modo Concurrente hay casos en los que quizá _quieras_ "duplicar" algunos datos en diferentes variables de estado. Considera esta pequeña aplicación de traducción:
 
 ```js
-const initialQuery = 'Hello, world';
+const initialQuery = 'Hola, mundo';
 const initialResource = fetchTranslation(initialQuery);
 
 function App() {
@@ -797,7 +797,7 @@ Por ejemplo, considera una lista filtrable como esta:
 
 ```js
 function App() {
-  const [text, setText] = useState('hello');
+  const [text, setText] = useState('hola');
 
   function handleChange(e) {
     setText(e.target.value);
@@ -823,7 +823,7 @@ Podemos ver ahora como cuando escribimos en la entrada de texto causa demoras. A
 
 ```js{3-5,18}
 function App() {
-  const [text, setText] = useState("hello");
+  const [text, setText] = useState("hola");
   const deferredText = useDeferredValue(text, {
     timeoutMs: 5000
   });

content/docs/concurrent-mode-reference.md

@@ -14,13 +14,13 @@ prev: concurrent-mode-adoption.html
 
 <div class="scary">
 
->Advertencia:
+> Advertencia:
 >
->Esta página describía **funcionalidades experimentales que aún no están disponibles en una versión estable**. Estaba dirigida a usuarios pioneros y personas curiosas.
+> Esta página describía **funcionalidades experimentales que aún no están disponibles en una versión estable**. Estaba dirigida a usuarios pioneros y personas curiosas.
 >
->Una gran parte de la información disponible en esta página está desactualizada y existe solo por motivos de archivo. **Por favor dirígete al [artículo del anuncio de React 18 Alfa](/blog/2021/06/08/the-plan-for-react-18.html) para obtener información actualizada.**
+> Una gran parte de la información disponible en esta página está desactualizada y existe solo por motivos de archivo. **Por favor dirígete al [artículo del anuncio de React 18 Alfa](/blog/2021/06/08/the-plan-for-react-18.html) para obtener información actualizada.**
 >
->Antes de que se lance React 18, reemplazaremos esta página con documentación estable.
+> Antes de que se lance React 18, reemplazaremos esta página con documentación estable.
 
 </div>
 
@@ -29,12 +29,12 @@ Esta página es una referencia del API del [Modo concurrente](/docs/concurrent-m
 **Nota: Esto es un una vista previa de la comunidad y no es la versión final estable. Es probable que existan futuros cambios a estas APIs. ¡Úsalas bajo tu propio riesgo!**
 
 - [Habilitando el modo concurrente](#concurrent-mode)
-    - [`createRoot`](#createroot)
+  - [`createRoot`](#createroot)
 - [Suspense](#suspense)
-    - [`Suspense`](#suspensecomponent)
-    - [`SuspenseList`](#suspenselist)
-    - [`useTransition`](#usetransition)
-    - [`useDeferredValue`](#usedeferredvalue)
+  - [`Suspense`](#suspensecomponent)
+  - [`SuspenseList`](#suspenselist)
+  - [`useTransition`](#usetransition)
+  - [`useDeferredValue`](#usedeferredvalue)
 
 ## Habilitando el modo concurrente {#concurrent-mode}
 
@@ -64,8 +64,9 @@ Para más información del Modo concurrente, revisa la [documentación del modo
 En este ejemplo, `ProfileDetails` está esperando una llamada asíncrona del API para obtener algunos datos. Mientras esperamos a `ProfileDetails` y `ProfilePhoto`, vamos a ir mostrando `Loading...` como contenido de respaldo mientras tanto. Es importante tener en cuenta que hasta que todos los hijos de `<Suspense>` hayan cargado, continuaremos mostrando el contenido de respaldo.
 
 `Suspense` lleva dos props:
-* **fallback** lleva un indicador de carga. El contenido de respaldo es mostrado hasta que todos los hijos de `Suspense` hayan terminado de renderizar.
-* **unstable_avoidThisFallback** lleva un booleano. Le dice a React si debe "omitir" revelar este límite durante la carga inicial. Es probable que esta API sea eliminada en una versión futura.
+
+- **fallback** lleva un indicador de carga. El contenido de respaldo es mostrado hasta que todos los hijos de `Suspense` hayan terminado de renderizar.
+- **unstable_avoidThisFallback** lleva un booleano. Le dice a React si debe "omitir" revelar este límite durante la carga inicial. Es probable que esta API sea eliminada en una versión futura.
 
 ### `<SuspenseList>` {#suspenselist}
 
@@ -89,12 +90,13 @@ En este ejemplo, `ProfileDetails` está esperando una llamada asíncrona del API
 Cuando varios componentes necesitan obtener datos, estos datos pueden llegar en un orden impredecible. Sin embargo, si envuelves estos elementos en un `SuspenseList`, React no mostrará un elemento de la lista hasta que todos los elementos anteriores se hayan mostrado (este comportamiente es ajustable).
 
 `SuspenseList` lleva dos props:
-* **revealOrder (forwards, backwards, together)** define el orden en el cual los hijos de `SuspenseList` deberían ser mostrados.
-  * `together` muestra *todos* ellos cuando estén listos en lugar de uno por uno.
-* **tail (collapsed, hidden)** decide como los contenidos de respaldo en un `SuspenseList` son mostrados.
-    * Por defecto, `SuspenseList` va a mostrar todos los contenidos de respaldo en la lista.
-    * `collapsed` solo muestra el siguiente contenido de respaldo en la lista.
-    * `hidden` no muestra ningun contenido de respaldo.
+
+- **revealOrder (forwards, backwards, together)** define el orden en el cual los hijos de `SuspenseList` deberían ser mostrados.
+  - `together` muestra _todos_ ellos cuando estén listos en lugar de uno por uno.
+- **tail (collapsed, hidden)** decide como los contenidos de respaldo en un `SuspenseList` son mostrados.
+  - Por defecto, `SuspenseList` va a mostrar todos los contenidos de respaldo en la lista.
+  - `collapsed` solo muestra el siguiente contenido de respaldo en la lista.
+  - `hidden` no muestra ningun contenido de respaldo.
 
 Tener en cuenta que `SuspenseList` solo funciona en los componentes `Suspense` y `SuspenseList` más cercanos debajo de él. No busca límites más profundos que un nivel. Sin embargo, es posible anidar múltiples componentes `SuspenseList` entre sí para construir grillas.
 
@@ -109,8 +111,9 @@ const [startTransition, isPending] = useTransition(SUSPENSE_CONFIG);
 `useTransition` permite a los componentes evitar estados de carga no deseada al esperar que se cargue el contenido antes de **transicionar hacia la siguiente pantalla**. También permite que los componentes difieran las actualizaciones de datos obtenidos más lentas hasta la siguiente renderización, de modo que se puedan presentar actualizaciones más cruciales de inmediato.
 
 El hook `useTransition` devuelve dos valores en un array.
-* `startTransition` es una función que toma un callback. Nosotros podemos usarlo para decirle a React cual estado queremos diferir.
-* `isPending` es un booleano. Es la manera en que React nos informa si estamos esperando que la transición termine.
+
+- `startTransition` es una función que toma un callback. Nosotros podemos usarlo para decirle a React cual estado queremos diferir.
+- `isPending` es un booleano. Es la manera en que React nos informa si estamos esperando que la transición termine.
 
 **Si alguna actualización de estado causa que un componente se suspenda, esa actualización de estado debería estar envuelta en una transición.**
 
@@ -171,7 +174,7 @@ Un buen ejemplo de esto es una entrada de texto.
 
 ```js
 function App() {
-  const [text, setText] = useState('hello');
+  const [text, setText] = useState('hola');
   const deferredText = useDeferredValue(text, {timeoutMs: 2000});
 
   return (

src/components/Layout/HomeContent.js

@@ -1474,7 +1474,7 @@ function SearchInput({value, onChange}) {
       data-hover="SearchInput"
       onSubmit={(e) => e.preventDefault()}>
       <label htmlFor={id} className="sr-only">
-        Search
+        Buscar
       </label>
       <div className="relative w-full">
         <div className="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none">
@@ -1484,7 +1484,7 @@ function SearchInput({value, onChange}) {
           type="text"
           id={id}
           className="flex pl-11 py-4 h-10 w-full bg-secondary-button outline-none betterhover:hover:bg-opacity-80 pointer items-center text-left text-primary rounded-full align-middle text-base"
-          placeholder="Search"
+          placeholder="Buscar"
           value={value}
           onChange={(e) => onChange(e.target.value)}
         />

src/components/MDX/MDXComponents.tsx

@@ -193,7 +193,7 @@ function AuthorCredit({
     <div className="sr-only group-hover:not-sr-only group-focus-within:not-sr-only hover:sr-only">
       <p className="bg-card dark:bg-card-dark text-center text-sm text-secondary dark:text-secondary-dark leading-tight dark:text-secondary-dark p-2 rounded-lg absolute left-1/2 -top-4 -translate-x-1/2 -translate-y-full group-hover:flex group-hover:opacity-100 after:content-[''] after:absolute after:left-1/2 after:top-[95%] after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-b-transparent after:border-t-card after:dark:border-t-card-dark opacity-0 transition-opacity duration-300">
         <cite>
-          Illustrated by{' '}
+          Ilustrado por{' '}
           {authorLink ? (
             <a
               target="_blank"

src/content/blog/2023/03/16/introducing-react-dev.md

@@ -360,7 +360,7 @@ function Item({ name, importance }) {
 export default function PackingList() {
   return (
     <section>
-      <h1>Sally Ride's Packing List</h1>
+      <h1>Lista de equipaje de Sally Ride</h1>
       <ul>
         <Item 
           importance={9} 
@@ -395,7 +395,7 @@ function Item({ name, importance }) {
       {name}
       {importance > 0 && ' '}
       {importance > 0 &&
-        <i>(Importance: {importance})</i>
+        <i>(Importancia: {importance})</i>
       }
     </li>
   );
@@ -404,7 +404,7 @@ function Item({ name, importance }) {
 export default function PackingList() {
   return (
     <section>
-      <h1>Sally Ride's Packing List</h1>
+      <h1>Lista de equipaje de Sally Ride</h1>
       <ul>
         <Item 
           importance={9}