Multi Language

1. Add content

                        
// ----------------------------------------------------
// File: src/utils/languages/ar.json  
// ----------------------------------------------------  

{
  "Modern": "عصري",
  "Contacts":"جهات الاتصال",
  "Chats":"الدردشات"
}



// ----------------------------------------------------
// File: src/utils/languages/en.json  
// ----------------------------------------------------  

{
  "Modern": "Modern",
  "Contacts":"Contacts",
  "Chats":"Chats"
}



// ----------------------------------------------------
// File: src/utils/languages/ch.json  
// ----------------------------------------------------  

{
  "Modern": "現代的",
  "Contacts":"聯繫人",
  "Chats":"聊天記錄"
}



// ----------------------------------------------------
// File: src/utils/languages/fr.json  
// ---------------------------------------------------- 

{
  "Modern": "Moderne",
  "Contacts":"Les contacts",
  "Chats":"Chattes"
}

2. Usage


// --------------------------------------------------------------------
// File: package/main/src/layouts/vertical/header/Language.tsx  
// --------------------------------------------------------------------

import { useContext, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Dropdown, DropdownItem } from 'flowbite-react';
import { CustomizerContext } from 'src/context/CustomizerContext';

import englishFlag from '/src/assets/images/flag/icon-flag-en.svg';
import chineseFlag from '/src/assets/images/flag/icon-flag-cn.svg';
import frenchFlag from '/src/assets/images/flag/icon-flag-fr.svg';
import southAfricaFlag from '/src/assets/images/flag/icon-flag-sa.svg';

const Languages = [
  {
    flagname: 'English (UK)',
    icon: englishFlag,
    value: 'en',
  },
  {
    flagname: '中国人 (Chinese)',
    icon: chineseFlag,
    value: 'ch',
  },
  {
    flagname: 'français (French)',
    icon: frenchFlag,
    value: 'fr',
  },
  {
    flagname: 'عربي (Arabic)',
    icon: southAfricaFlag,
    value: 'ar',
  },
];

export const Language = () => {
  const { i18n } = useTranslation();
  const { isLanguage, setIsLanguage } = useContext(CustomizerContext);

  const currentLang = Languages.find((_lang) => _lang.value === isLanguage) || Languages[1];

  useEffect(() => {
    i18n.changeLanguage(isLanguage);
  }, [isLanguage, i18n]);

  return (
    <div className="relative group/menu px-4">
      <Dropdown
        label=""
        className="w-56 rounded-sm"
        dismissOnClick=false
        renderTrigger=() => (
          <span className="relative after:absolute after:w-10 after:-top-1/2 after:h-10 after:rounded-full hover:after:bg-lightprimary rounded-full flex justify-center items-center cursor-pointer group-hover/menu:after:bg-lightprimary">
            <img
              src={currentLang.icon}
              alt="language"
              className="rounded-full h-5 w-5 shrink-0 object-cover cursor-pointer"
            />
          </span>
        )}
      >
        {Languages.map((item, index) => (
          <DropdownItem
            className="flex gap-3 items-center py-3 px-6 bg-hover group w-full"
            key={index}
            onClick=() => setIsLanguage(item.value)
          >
            <img
              src={item.icon}
              alt="flag"
              className="rounded-full object-cover h-5 w-5"
            />
            <span
              className="text-sm text-muted dark:text-darklink group-hover:!text-primary dark:group-hover:!text-primary font-medium leading-[25px]"
            >
              {item.flagname}
            </span>
          </DropdownItem>
        ))}
      </Dropdown>
    </div>
  );
};