revamp template

src/i18n/config.tsx

@@ -0,0 +1,50 @@
+import { toAbsoluteUrl } from '@/utils';
+import arMessages from './messages/ar.json';
+import enMessages from './messages/en.json';
+import frMessages from './messages/fr.json';
+import zhMessages from './messages/zh.json';
+import { type TLanguage } from './types.d';
+
+const I18N_MESSAGES = {
+  en: enMessages,
+  ar: arMessages,
+  fr: frMessages,
+  zh: zhMessages
+};
+
+const I18N_CONFIG_KEY = 'i18nConfig';
+
+const I18N_LANGUAGES: readonly TLanguage[] = [
+  {
+    label: 'English',
+    code: 'en',
+    direction: 'ltr',
+    flag: toAbsoluteUrl('/media/flags/united-states.svg'),
+    messages: I18N_MESSAGES.en
+  },
+  {
+    label: 'Arabic (Saudi)',
+    code: 'ar',
+    direction: 'rtl',
+    flag: toAbsoluteUrl('/media/flags/saudi-arabia.svg'),
+    messages: I18N_MESSAGES.ar
+  },
+  {
+    label: 'French',
+    code: 'fr',
+    direction: 'ltr',
+    flag: toAbsoluteUrl('/media/flags/france.svg'),
+    messages: I18N_MESSAGES.fr
+  },
+  {
+    label: 'Chinese',
+    code: 'zh',
+    direction: 'ltr',
+    flag: toAbsoluteUrl('/media/flags/china.svg'),
+    messages: I18N_MESSAGES.zh
+  }
+];
+
+const I18N_DEFAULT_LANGUAGE: TLanguage = I18N_LANGUAGES[0];
+
+export { I18N_CONFIG_KEY, I18N_DEFAULT_LANGUAGE, I18N_LANGUAGES, I18N_MESSAGES };

src/i18n/index.ts

@@ -0,0 +1,3 @@
+export * from '../providers/TranslationProvider';
+export * from './config';
+export * from './types.d';

src/i18n/messages/ar.json

@@ -0,0 +1,16 @@
+{
+  "USER.MENU.PUBLIC_PROFILE": "الملف الشخصي العام",
+  "USER.MENU.MY_PROFILE": "الملف الشخصي الخاص بي",
+  "USER.MENU.MY_ACCOUNT": "حسابي",
+  "USER.MENU.GET_STARTED": "البدء",
+  "USER.MENU.BILLING": "الفواتير",
+  "USER.MENU.SECURITY": "حماية",
+  "USER.MENU.MEMBERS_&_ROLES": "الأعضاء والأدوار",
+  "USER.MENU.INTEGRATIONS": "التكاملات",
+  "USER.MENU.NOTIFICATIONS": "إشعارات",
+  "USER.MENU.DEV_FORUM": "منتدى المطورين",
+  "USER.MENU.PAYMENT_&_SUBSCRIPTION_INFO": "معلومات الدفع والاشتراك",
+  "USER.MENU.DARK_MODE": "الوضع المظلم",
+  "USER.MENU.LOGOUT": "تسجيل الخروج",
+  "USER.MENU.LANGUAGE": "لغة"
+}

src/i18n/messages/en.json

@@ -0,0 +1,16 @@
+{
+  "USER.MENU.PUBLIC_PROFILE": "Public Profile",
+  "USER.MENU.MY_PROFILE": "My Profile",
+  "USER.MENU.MY_ACCOUNT": "My Account",
+  "USER.MENU.GET_STARTED": "Get Started",
+  "USER.MENU.BILLING": "Billing",
+  "USER.MENU.SECURITY": "Security",
+  "USER.MENU.MEMBERS_&_ROLES": "Members & Roles",
+  "USER.MENU.INTEGRATIONS": "Integrations",
+  "USER.MENU.NOTIFICATIONS": "Notifications",
+  "USER.MENU.DEV_FORUM": "Dev Forum",
+  "USER.MENU.PAYMENT_&_SUBSCRIPTION_INFO": "Payment & subscription info",
+  "USER.MENU.DARK_MODE": "Dark Mode",
+  "USER.MENU.LOGOUT": "Logout",
+  "USER.MENU.LANGUAGE": "Language"
+}

src/i18n/messages/fr.json

@@ -0,0 +1,16 @@
+{
+  "USER.MENU.PUBLIC_PROFILE": "Profil Public",
+  "USER.MENU.MY_PROFILE": "Mon Profil",
+  "USER.MENU.MY_ACCOUNT": "Mon Compte",
+  "USER.MENU.GET_STARTED": "Commencer",
+  "USER.MENU.BILLING": "Facturation",
+  "USER.MENU.SECURITY": "Sécurité",
+  "USER.MENU.MEMBERS_&_ROLES": "Membres et Rôles",
+  "USER.MENU.INTEGRATIONS": "Intégrations",
+  "USER.MENU.NOTIFICATIONS": "Notifications",
+  "USER.MENU.DEV_FORUM": "Forum de Développement",
+  "USER.MENU.PAYMENT_&_SUBSCRIPTION_INFO": "Informations sur le paiement et l'abonnement",
+  "USER.MENU.DARK_MODE": "Mode sombre",
+  "USER.MENU.LOGOUT": "Déconnexion",
+  "USER.MENU.LANGUAGE": "Langue"
+}

src/i18n/messages/zh.json

@@ -0,0 +1,16 @@
+{
+  "USER.MENU.PUBLIC_PROFILE": "公开资料",
+  "USER.MENU.MY_PROFILE": "我的个人资料",
+  "USER.MENU.MY_ACCOUNT": "我的帳戶",
+  "USER.MENU.GET_STARTED": "開始使用",
+  "USER.MENU.BILLING": "計費",
+  "USER.MENU.SECURITY": "安全",
+  "USER.MENU.MEMBERS_&_ROLES": "成員和角色",
+  "USER.MENU.INTEGRATIONS": "整合",
+  "USER.MENU.NOTIFICATIONS": "通知",
+  "USER.MENU.DEV_FORUM": "開發論壇",
+  "USER.MENU.PAYMENT_&_SUBSCRIPTION_INFO": "付款和訂閱訊息",
+  "USER.MENU.DARK_MODE": "深色模式",
+  "USER.MENU.LOGOUT": "退出",
+  "USER.MENU.LANGUAGE": "語言"
+}

src/i18n/types.d.ts

@@ -0,0 +1,19 @@
+import { type MessageFormatElement } from 'react-intl';
+
+export type TLanguageCode = 'en' | 'fr' | 'ar' | 'zh';
+
+export type TLanguageDirection = 'ltr' | 'rtl';
+
+export interface TLanguage {
+  label: string;
+  code: TLanguageCode;
+  direction: TLanguageDirection;
+  flag: string;
+  messages: Record<string, string> | Record<string, MessageFormatElement[]>;
+}
+
+export interface ITranslationProviderProps {
+  currentLanguage: TLanguage;
+  isRTL: () => boolean;
+  changeLanguage: (lang: TLanguage) => void;
+}