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 { useContext, useEffect, useState } from "react";

import { CustomizerContext } from "@/app/context/CustomizerContext";
import Image from "next/image";
import i18n from "@/utils/i18n";

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from "@/components/ui/dropdown-menu";

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 { isLanguage, setIsLanguage } = useContext(CustomizerContext);

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

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

  return (
    <div className="relative px-4">
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <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">
            <Image
              src={currentLang.icon}
              alt="language"
              width={100}
              height={100}
              className="rounded-full h-5 w-5 shrink-0 object-cover cursor-pointer"
            />
          </span>
        </DropdownMenuTrigger>

        <DropdownMenuContent className="w-56 rounded-sm p-1 z-50">
          {Languages.map((item, index) => (
            <DropdownMenuItem
              key={index}
              onSelect={() => setIsLanguage(item.value)}
              className="flex gap-3 items-center py-2 px-4 cursor-pointer hover:bg-muted"
            >
              <Image
                src={item.icon}
                alt={item.flagname}
                className="rounded-full object-cover h-5 w-5"
                width={100}
                height={100}
              />
              <span className="text-sm text-muted-foreground group-hover:text-primary font-medium leading-[25px]">
                {item.flagname}
              </span>
            </DropdownMenuItem>
          ))}
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
};