MaterialM Admin Template by WrapPixel.com

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: src/app/(DashboardLayout)/layout/vertical/header/Language.tsx  
// --------------------------------------------------------------------

"use client";
import React, { useContext, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { CustomizerContext } from "@/app/context/customizerContext";
import Image from "next/image";
import { Dropdown } from "flowbite-react";

const Languages = [
{
flagname: "English (UK)",
icon: "/images/flag/icon-flag-en.svg",
value: "en",
},
{
flagname: "中国人 (Chinese)",
icon: "/images/flag/icon-flag-cn.svg",
value: "ch",
},
{
flagname: "français (French)",
icon: "/images/flag/icon-flag-fr.svg",
value: "fr",
},

{
flagname: "عربي (Arabic)",
icon: "/images/flag/icon-flag-sa.svg",
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]);
return (
<>
<div className="relative group/menu">
      <Dropdown
      label=""
      className="w-56 "
      dismissOnClick={false}
      renderTrigger={() => (
          <span className="h-10 w-10 hover:bg-lightprimary rounded-full flex justify-center items-center cursor-pointer group-hover/menu:bg-lightprimary ">
          <Image
              src={currentLang.icon}
              height={40}
              width={35}
              alt="language"
              className="rounded-full h-6 w-6 object-cover cursor-pointer"
          />
          </span>
      )}
  >
  {Languages.map((item, index) => (
      <Dropdown.Item
      className="flex gap-3 items-center py-3 w-full"
      key={index}
      onClick={() => setIsLanguage(item.value)}
      >
      <Image
          src={item.icon}
          alt="flag"
          height={24}
          width={24}
          className="rounded-full object-cover h-6 w-6"
      />
      <span>{item.flagname}</span>
      </Dropdown.Item>
  ))}
  </Dropdown>
</div>
</>
);
};

Checkout Pro Version

Multi Language

1. Add content

2. Usage