docs: add i18n example

Author: joshunrau

apps/playground/src/instruments/examples/interactive/Multilingual-Interactive/index.ts

@@ -1,9 +1,9 @@
 /* eslint-disable perfectionist/sort-objects */
 
-import { createI18Next, defineInstrument } from '/runtime/v1/@opendatacapture/runtime-core';
+import { defineInstrument } from '/runtime/v1/@opendatacapture/runtime-core';
 import { z } from '/runtime/v1/[email protected]';
 
-import { translations } from './translations.ts';
+import { translator } from './translator.ts';
 
 export default defineInstrument({
   kind: 'INTERACTIVE',
@@ -18,27 +18,27 @@ export default defineInstrument({
   },
   content: {
     render(done) {
-      const i18n = createI18Next({ translations });
+      translator.init();
 
       const changeLanguageButton = document.createElement('button');
-      changeLanguageButton.textContent = i18n.t('changeLanguage');
+      changeLanguageButton.textContent = translator.t('changeLanguage');
       document.body.appendChild(changeLanguageButton);
 
       changeLanguageButton.addEventListener('click', () => {
-        i18n.changeLanguage(i18n.resolvedLanguage === 'en' ? 'fr' : 'en');
+        translator.changeLanguage(translator.resolvedLanguage === 'en' ? 'fr' : 'en');
       });
 
       const submitButton = document.createElement('button');
-      submitButton.textContent = i18n.t('submit');
+      submitButton.textContent = translator.t('submit');
       document.body.appendChild(submitButton);
 
-      i18n.onLanguageChange = () => {
-        changeLanguageButton.textContent = i18n.t('changeLanguage');
-        submitButton.textContent = i18n.t('submit');
+      translator.onLanguageChange = () => {
+        changeLanguageButton.textContent = translator.t('changeLanguage');
+        submitButton.textContent = translator.t('submit');
       };
 
       submitButton.addEventListener('click', () => {
-        done({ message: i18n.t('greetings.hello') });
+        done({ message: translator.t('greetings.hello') });
       });
     }
   },

apps/playground/src/instruments/examples/interactive/Multilingual-Interactive/translator.ts

@@ -0,0 +1,20 @@
+import { Translator } from '/runtime/v1/@opendatacapture/runtime-core';
+
+export const translator = new Translator({
+  translations: {
+    changeLanguage: {
+      en: 'Change Language',
+      fr: 'Changer de langue'
+    },
+    greetings: {
+      hello: {
+        en: 'Hello',
+        fr: 'Bonjour'
+      }
+    },
+    submit: {
+      en: 'Submit',
+      fr: 'Soumettre'
+    }
+  }
+});