From c3cca851846111d7df9f83869bb631369af2b871 Mon Sep 17 00:00:00 2001
From: TinsFox <fox@tinsfox.com>
Date: Sun, 3 Sep 2023 02:18:48 +0800
Subject: [PATCH] docs(i18n): update i18n usage (#4129)

Co-authored-by: Alex Yang <himself65@outlook.com>
---
 packages/i18n/README.md | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/i18n/README.md b/packages/i18n/README.md
index 7f233a05ad..5c8ad66f57 100644
--- a/packages/i18n/README.md
+++ b/packages/i18n/README.md
@@ -7,7 +7,7 @@
 
 ```tsx
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-
+import { LOCALES, useI18N } from '@affine/i18n';
 // src/resources/en.json
 // {
 //     'Text': 'some text',
@@ -16,7 +16,7 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 
 const App = () => {
   const t = useAFFiNEI18N();
-
+  const i18n = useI18N();
   const changeLanguage = (language: string) => {
     i18n.changeLanguage(language);
   };
@@ -24,9 +24,20 @@ const App = () => {
   return (
     <div>
       <div>{t['Workspace Settings']()}</div>
-
-      <button onClick={() => changeLanguage('en')}>{t('Switch to language', { language: 'en' })}</button>
-      <button onClick={() => changeLanguage('zh-Hans')}>{t('Switch to language', { language: 'zh-Hans' })}</button>
+      <>
+        {LOCALES.map(option => {
+          return (
+            <button
+              key={option.name}
+              onClick={() => {
+                changeLanguage(option.tag);
+              }}
+            >
+              {option.originalName}
+            </button>
+          );
+        })}
+      </>
     </div>
   );
 };