Multi Language

1. Add content

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

{
  "Dashboard1": "لوحة القيادة1",
  "Dashboard2": "لوحة القيادة2",
  "Dashboard3": "لوحة القيادة3",
}



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

{
"Dashboard1":"Dashboard1",
"Dashboard2":"Dashboard2",
"Dashboard3":"Dashboard3",
}



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

{
    "Dashboard1":"儀表板1",
    "Dashboard2":"儀表板2",
    "Dashboard3":"儀表板3",
}



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

{
  "Dashboard1": "Tableau de bord1",
  "Dashboard2": "Tableau de bord2",
  "Dashboard3": "Tableau de bord3",
}

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>
    </>
  );
};