feat: implement core-i18n package with decentralized namespace support and integrate into landing and web apps

2026-05-22 23:30:41 +07:00
parent 255704f867
commit 4655362ff4
25 changed files with 932 additions and 13 deletions
@@ -0,0 +1,50 @@
+import { useEffect } from 'react';
+import { useTranslation, changeLanguage, i18n } from '@repo/core-i18n';
+
+// Decentralized locale imports
+import homeId from '../locales/id/home.json';
+import homeEn from '../locales/en/home.json';
+
+export default function I18nLandingSample() {
+  const { t } = useTranslation(['common', 'home']);
+
+  // 1. Lazy-load the 'home' namespace when the module mounts
+  useEffect(() => {
+    i18n.addResourceBundle('id', 'home', homeId, true, false);
+    i18n.addResourceBundle('en', 'home', homeEn, true, false);
+  }, []);
+
+  // 2. Change language without syncCallback to prove decoupling
+  const setLanguage = (lng: string) => {
+    // We intentionally omit the second argument (syncCallback)
+    // because the landing page is public and doesn't need backend syncing.
+    changeLanguage(lng).catch(console.error);
+  };
+
+  return (
+    <div style={{ padding: 40, textAlign: 'center', backgroundColor: '#f8fafc', color: '#0f172a' }}>
+      <h1 style={{ fontSize: 36, fontWeight: 'bold', marginBottom: 16 }}>
+        {t('home:welcome')}
+      </h1>
+      
+      <div style={{ marginBottom: 32 }}>
+        <button 
+          onClick={() => setLanguage('id')}
+          style={{ padding: '8px 16px', marginRight: 8, cursor: 'pointer', borderRadius: 4, background: '#3b82f6', color: 'white', border: 'none' }}
+        >
+          Bahasa Indonesia
+        </button>
+        <button 
+          onClick={() => setLanguage('en')}
+          style={{ padding: '8px 16px', cursor: 'pointer', borderRadius: 4, background: '#3b82f6', color: 'white', border: 'none' }}
+        >
+          English
+        </button>
+      </div>
+
+      <button style={{ padding: '16px 32px', fontSize: 18, fontWeight: 'bold', cursor: 'pointer', borderRadius: 8, background: '#10b981', color: 'white', border: 'none' }}>
+        {t('home:cta')}
+      </button>
+    </div>
+  );
+}