Update and improve PT-BR translations for UI labels, components, and Learn pages

src/components/Layout/TopNav/TopNav.tsx

@@ -316,7 +316,7 @@ export default function TopNav({
                 )}
                 onClick={onOpenSearch}>
                 <IconSearch className="align-middle me-3 text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />
-                Search
+                Procurar
                 <span className="hidden ms-auto sm:flex item-center me-1">
                   <Kbd data-platform="mac">⌘</Kbd>
                   <Kbd data-platform="win" wide>

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/MDXComponents.tsx

@@ -193,7 +193,7 @@ function LearnMore({
       <section className="p-8 mt-16 mb-16 flex flex-row shadow-inner-border dark:shadow-inner-border-dark justify-between items-center bg-card dark:bg-card-dark rounded-2xl">
         <div className="flex-col">
           <h2 className="text-primary font-display dark:text-primary-dark font-bold text-2xl leading-tight">
-            Ready to learn this topic?
+            Pronto para aprender sobre este assunto?
           </h2>
           {children}
           {path ? (

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/components/SocialBanner.tsx

@@ -9,9 +9,9 @@ import {useRef, useEffect} from 'react';
 import cn from 'classnames';
 import {ExternalLink} from './ExternalLink';
 
-const bannerText = 'Join us for React Conf on Oct 7-8.';
+const bannerText = 'Participe da conferência React nos dias 7 e 8 de outubro.';
 const bannerLink = 'https://conf.react.dev/';
-const bannerLinkText = 'Learn more.';
+const bannerLinkText = 'Saiba mais.';
 
 export default function SocialBanner() {
   const ref = useRef<HTMLDivElement | null>(null);

src/components/Tag.tsx

@@ -14,23 +14,23 @@ import type {RouteTag} from './Layout/getRouteMeta';
 
 const variantMap = {
   foundation: {
-    name: 'Foundation',
+    name: 'Fundamentos',
     classes: 'bg-yellow-50 text-white',
   },
   intermediate: {
-    name: 'Intermediate',
+    name: 'Intermediário',
     classes: 'bg-purple-40 text-white',
   },
   advanced: {
-    name: 'Advanced',
+    name: 'Avançado',
     classes: 'bg-green-40 text-white',
   },
   experimental: {
     name: 'Experimental',
     classes: 'bg-ui-orange text-white',
   },
   deprecated: {
-    name: 'Deprecated',
+    name: 'Obsoleto',
     classes: 'bg-red-40 text-white',
   },
 };

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

@@ -526,33 +526,33 @@ Leia **[Mantendo Seus Componentes Puros](/learn/keeping-components-pure)** para
 
 </LearnMore>
 
-## Your UI as a tree {/*your-ui-as-a-tree*/}
+## Sua interface de usuário como uma árvore {/*your-ui-as-a-tree*/}
 
-React uses trees to model the relationships between components and modules.
+O React utiliza árvores para modelar as relações entre componentes e módulos.
 
-A React render tree is a representation of the parent and child relationship between components.
+Uma árvore de renderização React é uma representação da relação pai-filho entre componentes.
 
-<Diagram name="generic_render_tree" height={250} width={500} alt="A tree graph with five nodes, with each node representing a component. The root node is located at the top the tree graph and is labelled 'Root Component'. It has two arrows extending down to two nodes labelled 'Component A' and 'Component C'. Each of the arrows is labelled with 'renders'. 'Component A' has a single 'renders' arrow to a node labelled 'Component B'. 'Component C' has a single 'renders' arrow to a node labelled 'Component D'.">
+<Diagram name="generic_render_tree" height={250} width={500} alt="A tree graph with five nodes, with each node representing a component. The root node is located at the top the tree graph and is labelled 'Componente raiz'. It has two arrows extending down to two nodes labelled 'Componente A' and 'Componente C'. Each of the arrows is labelled with 'renders'. 'Componente A' has a single 'renders' arrow to a node labelled 'Componente B'. 'Componente C' has a single 'renders' arrow to a node labelled 'Componente D'.">
 
-An example React render tree.
+Um exemplo de árvore de renderização React.
 
 </Diagram>
 
-Components near the top of the tree, near the root component, are considered top-level components. Components with no child components are leaf components. This categorization of components is useful for understanding data flow and rendering performance.
+Os componentes próximos ao topo da árvore, perto do componente raiz, são considerados componentes de nível superior. Componentes sem componentes filhos são componentes folha. Essa categorização de componentes é útil para entender o fluxo de dados e o desempenho de renderização.
 
-Modelling the relationship between JavaScript modules is another useful way to understand your app. We refer to it as a module dependency tree.
+Modelar o relacionamento entre módulos JavaScript é outra maneira útil de entender seu aplicativo. Chamamos isso de árvore de dependências de módulos.
 
 <Diagram name="generic_dependency_tree" height={250} width={500} alt="A tree graph with five nodes. Each node represents a JavaScript module. The top-most node is labelled 'RootModule.js'. It has three arrows extending to the nodes: 'ModuleA.js', 'ModuleB.js', and 'ModuleC.js'. Each arrow is labelled as 'imports'. 'ModuleC.js' node has a single 'imports' arrow that points to a node labelled 'ModuleD.js'.">
 
-An example module dependency tree.
+Um exemplo de árvore de dependências de módulos.
 
 </Diagram>
 
-A dependency tree is often used by build tools to bundle all the relevant JavaScript code for the client to download and render. A large bundle size regresses user experience for React apps. Understanding the module dependency tree is helpful to debug such issues.
+Uma árvore de dependências é frequentemente usada por ferramentas de compilação para agrupar todo o código JavaScript relevante para o cliente baixar e renderizar. Um pacote muito grande prejudica a experiência do usuário em aplicativos React. Compreender a árvore de dependências do módulo é útil para depurar esses problemas.
 
 <LearnMore path="/learn/understanding-your-ui-as-a-tree">
 
-Read **[Your UI as a Tree](/learn/understanding-your-ui-as-a-tree)** to learn how to create a render and module dependency trees for a React app and how they're useful mental models for improving user experience and performance.
+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

@@ -62,7 +62,7 @@
       "canary": true,
       "routes": [
         {
-          "title": "Introduction",
+          "title": "Introdução",
           "path": "/learn/react-compiler/introduction"
         },
         {
@@ -85,8 +85,8 @@
     },
     {
       "title": "Descrevendo a IU",
-      "tags": [],
       "path": "/learn/describing-the-ui",
+      "tags": [],
       "routes": [
         {
           "title": "Seu Primeiro Componente",
@@ -121,7 +121,7 @@
           "path": "/learn/keeping-components-pure"
         },
         {
-          "title": "Your UI as a Tree",
+          "title": "Sua interface de usuário como uma árvore",
           "path": "/learn/understanding-your-ui-as-a-tree"
         }
       ]