translate Your First Component (beta docs) (#516)

* wip

* finish page

* fix typos

* fix line number

Author: carburo

beta/src/components/MDX/Challenges/Challenges.tsx

@@ -72,7 +72,7 @@ const parseChallengeContents = (
 export function Challenges({
   children,
   isRecipes,
-  titleText = isRecipes ? 'Try out some examples' : 'Try out some challenges',
+  titleText = isRecipes ? 'Prueba algunos ejemplos' : 'Prueba algunos desafíos',
   titleId = isRecipes ? 'examples' : 'challenges',
 }: ChallengesProps) {
   const challenges = parseChallengeContents(children);
@@ -143,8 +143,8 @@ export function Challenges({
           <div key={activeChallenge}>
             <h3 className="text-xl text-primary dark:text-primary-dark mb-2">
               <div className="font-bold block md:inline">
-                {isRecipes ? 'Example' : 'Challenge'} {currentChallenge.order}{' '}
-                of {challenges.length}
+                {isRecipes ? 'Ejemplo' : 'Desafío'} {currentChallenge.order} of{' '}
+                {challenges.length}
                 <span className="text-primary dark:text-primary-dark">: </span>
               </div>
               {currentChallenge.name}
@@ -156,14 +156,14 @@ export function Challenges({
               <div>
                 <Button className="mr-2" onClick={toggleHint} active={showHint}>
                   <IconHint className="mr-1.5" />{' '}
-                  {showHint ? 'Hide hint' : 'Show hint'}
+                  {showHint ? 'Ocultar pista' : 'Mostrar pista'}
                 </Button>
                 <Button
                   className="mr-2"
                   onClick={toggleSolution}
                   active={showSolution}>
                   <IconSolution className="mr-1.5" />{' '}
-                  {showSolution ? 'Hide solution' : 'Show solution'}
+                  {showSolution ? 'Ocultar solución' : 'Mostrar solución'}
                 </Button>
               </div>
             ) : (
@@ -173,7 +173,7 @@ export function Challenges({
                   onClick={toggleSolution}
                   active={showSolution}>
                   <IconSolution className="mr-1.5" />{' '}
-                  {showSolution ? 'Hide solution' : 'Show solution'}
+                  {showSolution ? 'Ocultar solución' : 'Mostrar solución'}
                 </Button>
               )
             )}
@@ -190,7 +190,7 @@ export function Challenges({
                   setShowSolution(false);
                 }}
                 active>
-                Next {isRecipes ? 'Example' : 'Challenge'}
+                Próximo {isRecipes ? 'ejemplo' : 'desafío'}
                 <IconArrowSmall
                   displayDirection="right"
                   className="block ml-1.5"
@@ -203,12 +203,12 @@ export function Challenges({
           {showSolution && (
             <div className="mt-6">
               <h3 className="text-2xl font-bold text-primary dark:text-primary-dark">
-                Solution
+                Solución
               </h3>
               {currentChallenge.solution}
               <div className="flex justify-between items-center mt-4">
                 <Button onClick={() => setShowSolution(false)}>
-                  Close solution
+                  Cerrar solución
                 </Button>
                 {nextChallenge && (
                   <Button
@@ -226,7 +226,7 @@ export function Challenges({
                       }
                     }}
                     active>
-                    Next Challenge
+                    Próximo desafío
                     <IconArrowSmall
                       displayDirection="right"
                       className="block ml-1.5"

beta/src/components/MDX/ExpandableCallout.tsx

@@ -16,7 +16,7 @@ interface ExpandableCalloutProps {
 
 const variantMap = {
   note: {
-    title: 'Note',
+    title: 'Nota',
     Icon: IconNote,
     containerClasses:
       'bg-green-5 dark:bg-green-60 dark:bg-opacity-20 text-primary dark:text-primary-dark text-lg',
@@ -25,7 +25,7 @@ const variantMap = {
       'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)',
   },
   gotcha: {
-    title: 'Pitfall',
+    title: 'Atención',
     Icon: IconGotcha,
     containerClasses: 'bg-yellow-5 dark:bg-yellow-60 dark:bg-opacity-20',
     textColor: 'text-yellow-50 dark:text-yellow-40',

beta/src/components/MDX/Recap.tsx

@@ -13,7 +13,7 @@ function Recap({children}: RecapProps) {
   return (
     <section>
       <H2 isPageAnchor id="recap">
-        Recap
+        Recapitulación
       </H2>
       {children}
     </section>