Merge branch 'tomalaforge:main' into translate-docs-challenge-22

docs/src/components/SubscriptionForm.astro

@@ -85,6 +85,11 @@ const { data } = await getEntry('i18n', lang ?? 'en');
       text-decoration: none;
       font-size: var(--sl-text-sm);
       background: var(--sl-color-text-accent);
+
+      &:hover {
+        top: unset;
+        opacity: unset;
+      }
     }
   }
 

docs/src/content/docs/index.mdx

@@ -69,7 +69,10 @@ import SubscriptionForm from '../../components/SubscriptionForm.astro';
 ---
 
 <div class="article-footer">
-  <a href="https://github.com/sponsors/tomalaforge" alt="Sponsor link">
+  <a
+    class="action"
+    href="https://github.com/sponsors/tomalaforge"
+    alt="Sponsor link">
     <MyIcon name="fillHeart" size="1.2rem" color="white" />
     Sponsor the Project
   </a>

docs/src/content/docs/pt/challenges/angular/45-react-in-angular.md

@@ -0,0 +1,76 @@
+---
+title: 🔴 React em angular
+description: Desafio 5 é sobre aprender como se beneficiar das várias bibliotecas em React
+author: wandrille-guesdon
+contributors:
+  - tomalaforge 45
+command: angular-react-in-angular
+sidebar:
+  order: 209
+---
+
+O objetivo deste desafio é usar um componente React dentro de uma aplicação Angular.
+
+Muitos componentes estão disponíveis em React, e pode ser interessante usar eles em uma aplicação Angular. O objetivo é criar um componente React e usar em uma aplicação Angular.
+
+## Informação
+
+Neste desafio temos uma simples aplicação e um componente React `ReactPost` em `app/react` para ilustrar um componente React de uma biblioteca.
+
+## Declaração
+
+- Sua tarefa é mostrar as postagens com o componente React `ReactPost`.
+- Quando selecionar uma postagem, a postagem deve ser destacada.
+
+Para brincar com o componente React, você deve começar instalando as dependências do React.
+
+```bash
+npm i --save react react-dom
+npm i --save-dev @types/react @types/react-dom
+```
+
+## Restrições
+
+- Não transforme o componente React em um componente Angular. O componente React é bem simples e pode ser escrito facilmente em Angular. No entanto, o **objetivo é usar o componente React**.
+
+### Dica
+
+<details>
+  <summary>Dica 1 - Configuração</summary>
+  Permita arquivos React no tsconfig.json
+
+```
+{
+...
+"compilerOptions": {
+  ...
+  "jsx": "react"
+},
+...
+}
+```
+
+</details>
+
+<details>
+  <summary>Dica 2 - Initialização</summary>
+  Crie uma raiz react com `createRoot(...)`
+</details>
+
+<details>
+  <summary>Dica 3 - Visualização</summary>
+  Para renderizar o componente, ele deve parecer com:
+    ```
+    <react root>.render(
+        <React.StrictMode>
+        ...
+        </React.StrictMode>
+    )
+    ```
+
+</details>
+
+<details>
+  <summary>Dica 4 - Design</summary>
+  Não esqueça de permitir o arquivo react no Tailwind.
+</details>

docs/src/styles/custom-css.css

@@ -73,6 +73,10 @@
   align-items: center;
   margin-top: 0;
   background-color: var(--sl-color-accent-high);
+
+  &.action {
+    color: var(--color-btn);
+  }
 }
 
 .article-footer > a > p {