i18n(fr): Update sharing-state.mdx file from withastro#8167 (STEPS)

Signed-off-by: Thomas Bonnet <thomasbnt@protonmail.com>

src/content/docs/fr/recipes/sharing-state.mdx

@@ -3,84 +3,86 @@ title: Partage d'état entre composants Astro
 description: Apprendre à partager des états entre composants Astro avec Nano Stores.
 i18nReady: true
 type: recipe
-
 ---
+import { Steps } from '@astrojs/starlight/components';
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
 
 :::tip
-Vous utilisez des composants de Framework? Voir [comment partager l'état entre les îles](/fr/recipes/sharing-state-islands/)!
+Vous utilisez des composants de Framework ? Voir [comment partager l'état entre les îles](/fr/recipes/sharing-state-islands/)!
 :::
 
 Lors de la création d'un site web Astro, il se peut que vous deviez partager l'état des composants. Astro recommande l'utilisation de [Nano Stores](https://github.com/nanostores/nanostores) pour le stockage partagé des clients.
 
 ## Méthode
 
+<Steps>
 1. Installer Nano Stores:
 
-  <PackageManagerTabs>
-    <Fragment slot="npm">
-    ```shell
-    npm install nanostores
-    ```
-    </Fragment>
-    <Fragment slot="pnpm">
-    ```shell
-    pnpm add nanostores
-    ```
-    </Fragment>
-    <Fragment slot="yarn">
-    ```shell
-    yarn add nanostores
-    ```
-    </Fragment>
-  </PackageManagerTabs>
+    <PackageManagerTabs>
+      <Fragment slot="npm">
+      ```shell
+      npm install nanostores
+      ```
+      </Fragment>
+      <Fragment slot="pnpm">
+      ```shell
+      pnpm add nanostores
+      ```
+      </Fragment>
+      <Fragment slot="yarn">
+      ```shell
+      yarn add nanostores
+      ```
+      </Fragment>
+    </PackageManagerTabs>
 
 2. Créez un store. Dans cet exemple, le store indique si un dialogue est ouvert ou non :
 
-  ```ts title="src/store.js"
-  import { atom } from 'nanostores';
+    ```ts title="src/store.js"
+    import { atom } from 'nanostores';
 
-  export const isOpen = atom(false);
-  ```
+    export const isOpen = atom(false);
+    ```
 
 3. Importez et utilisez le store dans une balise `<script>` dans les composants qui partageront l'état.
 
-Les composants `Button` et `Dialog` suivants utilisent chacun l'état partagé `isOpen` pour contrôler si une `<div>` particulière est cachée ou affichée :
-
-  ```astro title="src/components/Button.astro"
-  <button id="openDialog">Ouvert</button>
-
-  <script>
-    import { isOpen } from '../store.js';
-    
-    // Définir le magasin à true lorsque le bouton est cliqué
-    function openDialog() {
-      isOpen.set(true);
-    }
-
-    // Ajouter un écouteur d'événement au bouton
-    document.getElementById('openDialog').addEventListener('click', openDialog);
-  </script>
-  ```
-
-  ```astro title="src/components/Dialog.astro"
-  <div id="dialog" style="display: hidden">Hello world!</div>
-
-  <script>
-    import { isOpen } from '../store.js';
-
-    // Écouter les changements dans le store et affiche/masque le dialogue en conséquence    
-    isOpen.subscribe(open => {
-      if (open) {
-        document.getElementById('dialog').style.display = 'block';
-      } else {
-        document.getElementById('dialog').style.display = 'none';
+    Les composants `Button` et `Dialog` suivants utilisent chacun l'état partagé `isOpen` pour contrôler si une `<div>` particulière est cachée ou affichée :
+  
+    ```astro title="src/components/Button.astro"
+    <button id="openDialog">Ouvrir</button>
+  
+    <script>
+      import { isOpen } from '../store.js';
+      
+      // Définir le magasin à true lorsque le bouton est cliqué
+      function openDialog() {
+        isOpen.set(true);
       }
-    })
-  </script>
-  ```
+  
+      // Ajouter un écouteur d'événement au bouton
+      document.getElementById('openDialog').addEventListener('click', openDialog);
+    </script>
+    ```
+  
+    ```astro title="src/components/Dialog.astro"
+    <div id="dialog" style="display: hidden">Hello world!</div>
+  
+    <script>
+      import { isOpen } from '../store.js';
+  
+      // Écouter les changements dans le store et affiche/masque le dialogue en conséquence    
+      isOpen.subscribe(open => {
+        if (open) {
+          document.getElementById('dialog').style.display = 'block';
+        } else {
+          document.getElementById('dialog').style.display = 'none';
+        }
+      })
+    </script>
+    ```
+</Steps>
 
 ## Resources
 
 - [Nano Stores sur NPM](https://www.npmjs.com/package/nanostores)
-- [Documentation Nano Stores pour Vanilla JS](https://github.com/nanostores/nanostores#vanilla-js)
+- [Documentation Nano Stores pour Vanilla JS](https://github.com/nanostores/nanostores#vanilla-js)