feat: translate UI text and titles to Portuguese for better localization

Author: Lucas-Steffen

src/components/MDX/Challenges/Challenge.tsx

@@ -57,7 +57,7 @@ export function Challenge({
           className="text-xl text-primary dark:text-primary-dark mb-2 mt-0 font-medium"
           id={currentChallenge.id}>
           <div className="font-bold block md:inline">
-            {isRecipes ? 'Example' : 'Challenge'} {currentChallenge.order} of{' '}
+            {isRecipes ? 'Exemplo' : 'Desafio'} {currentChallenge.order} de{' '}
             {totalChallenges}
             <span className="text-primary dark:text-primary-dark">: </span>
           </div>
@@ -69,15 +69,15 @@ export function Challenge({
         {currentChallenge.hint ? (
           <div>
             <Button className="me-2" onClick={toggleHint} active={showHint}>
-              <IconHint className="me-1.5" />{' '}
-              {showHint ? 'Hide hint' : 'Show hint'}
+              <IconHint />{' '}
+              {showHint ? 'Ocultar dica' : 'Exibir dica'}
             </Button>
             <Button
               className="me-2"
               onClick={toggleSolution}
               active={showSolution}>
-              <IconSolution className="me-1.5" />{' '}
-              {showSolution ? 'Hide solution' : 'Show solution'}
+              <IconSolution />{' '}
+              {showSolution ? 'Ocultar Solução' : 'Exibir Solução'}
             </Button>
           </div>
         ) : (
@@ -86,8 +86,8 @@ export function Challenge({
               className="me-2"
               onClick={toggleSolution}
               active={showSolution}>
-              <IconSolution className="me-1.5" />{' '}
-              {showSolution ? 'Hide solution' : 'Show solution'}
+              <IconSolution />{' '}
+              {showSolution ? 'Ocultar Solução' : 'Exibir Solução'}
             </Button>
           )
         )}
@@ -111,12 +111,12 @@ export function Challenge({
       {showSolution && (
         <div className="mt-6">
           <h3 className="text-2xl font-bold text-primary dark:text-primary-dark">
-            Solution
+            Solução
           </h3>
           {currentChallenge.solution}
           <div className="flex justify-between items-center mt-4">
             <Button onClick={() => setShowSolution(false)}>
-              Close solution
+              Fechar solução
             </Button>
             {hasNextChallenge && (
               <Button
@@ -125,7 +125,7 @@ export function Challenge({
                 )}
                 onClick={handleClickNextChallenge}
                 active>
-                Next Challenge
+                Próximo desafio
                 <IconArrowSmall
                   displayDirection="end"
                   className="block ms-1.5"

src/components/MDX/Challenges/Challenges.tsx

@@ -88,8 +88,8 @@ export function Challenges({
   children,
   isRecipes,
   noTitle,
-  titleText = isRecipes ? 'Try out some examples' : 'Try out some challenges',
-  titleId = isRecipes ? 'examples' : 'challenges',
+  titleText = isRecipes ? 'Experimente alguns exemplos' : 'Experimente alguns exemplos',
+  titleId = isRecipes ? 'exemplos' : 'desafios',
 }: ChallengesProps) {
   const challenges = parseChallengeContents(children);
   const totalChallenges = challenges.length;

src/components/MDX/Sandpack/ClearButton.tsx

@@ -20,10 +20,10 @@ export function ClearButton({onClear}: ClearButtonProps) {
     <button
       className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1"
       onClick={onClear}
-      title="Clear all edits and reload sandbox"
+      title="Limpar todas as edições e recarregar a sandbox."
       type="button">
       <IconClose className="inline mx-1 relative" />
-      <span className="hidden md:block">Clear</span>
+      <span className="hidden md:block">Limpar</span>
     </button>
   );
 }

src/components/MDX/Sandpack/NavigationBar.tsx

@@ -117,7 +117,7 @@ export function NavigationBar({
      *
      * Plus, it should only prompt if there's any file changes
      */
-    if (sandpack.editorState === 'dirty' && confirm('Clear all your edits?')) {
+    if (sandpack.editorState === 'dirty' && confirm('Limpar todas as alterações?')) {
       sandpack.resetAllFiles();
     }
     refresh();

src/components/MDX/Sandpack/ReloadButton.tsx

@@ -23,7 +23,7 @@ export function ReloadButton({onReload}: ReloadButtonProps) {
       title="Keep your edits and reload sandbox"
       type="button">
       <IconRestart className="inline mx-1 relative" />
-      <span className="hidden md:block">Reload</span>
+      <span className="hidden md:block">Recarregar</span>
     </button>
   );
 }

src/content/learn/describing-the-ui.md

@@ -552,7 +552,8 @@ Uma árvore de dependências é frequentemente usada por ferramentas de compila
 
 <LearnMore path="/learn/understanding-your-ui-as-a-tree">
 
-Leia **[Sua interface de usuário como uma árvore](/learn/understanding-your-ui-as-a-tree)** Aprenda como criar árvores de dependências de renderização e de módulos para um aplicativo React e como elas são modelos mentais úteis para melhorar a experiência do usuário e o desempenho.
+Leia **[Sua interface de usuário como uma árvore](/learn/understanding-your-ui-as-a-tree)** para aprender como criar árvores de renderização e de dependências de módulos para um aplicativo React e como elas são modelos mentais úteis para melhorar a experiência do usuário e o desempenho.
+
 </LearnMore>
 
 

src/sidebarLearn.json

@@ -86,7 +86,7 @@
     {
       "title": "Descrevendo a IU",
       "path": "/learn/describing-the-ui",
-      "tags": ["foundation"],
+      "tags": [],
       "routes": [
         {
           "title": "Seu Primeiro Componente",