83 lines
3.3 KiB
TypeScript
83 lines
3.3 KiB
TypeScript
"use client";
|
||
|
||
import IMAGES from "@/config/images";
|
||
import { IconClick, GhostButton } from "./ui/buttons";
|
||
import { useState } from "react";
|
||
|
||
export default function LanguageSettings() {
|
||
const [showLanguageMenu, setShowLanguageMenu] = useState(false);
|
||
const handleLanguageClick = () => {
|
||
setShowLanguageMenu((prev) => !prev);
|
||
};
|
||
const setLocale = async (locale: string) => {
|
||
document.cookie = `locale=${locale}`;
|
||
window.location.reload();
|
||
};
|
||
return (
|
||
<>
|
||
<IconClick
|
||
src={IMAGES.language_white}
|
||
alt="language"
|
||
disableOnHoverBgChange={true}
|
||
onClick={handleLanguageClick}
|
||
size={40}
|
||
></IconClick>
|
||
<div className="relative">
|
||
{showLanguageMenu && (
|
||
<div>
|
||
<div className="absolute top-10 right-0 rounded-md shadow-md flex flex-col gap-2">
|
||
<GhostButton
|
||
className="w-full bg-[#35786f]"
|
||
onClick={() => setLocale("en-US")}
|
||
>
|
||
English
|
||
</GhostButton>
|
||
<GhostButton
|
||
className="w-full bg-[#35786f]"
|
||
onClick={() => setLocale("zh-CN")}
|
||
>
|
||
中文
|
||
</GhostButton>
|
||
<GhostButton
|
||
className="w-full bg-[#35786f]"
|
||
onClick={() => setLocale("ja-JP")}
|
||
>
|
||
日本語
|
||
</GhostButton>
|
||
<GhostButton
|
||
className="w-full bg-[#35786f]"
|
||
onClick={() => setLocale("ko-KR")}
|
||
>
|
||
한국어
|
||
</GhostButton>
|
||
<GhostButton
|
||
className="w-full bg-[#35786f]"
|
||
onClick={() => setLocale("de-DE")}
|
||
>
|
||
Deutsch
|
||
</GhostButton>
|
||
<GhostButton
|
||
className="w-full bg-[#35786f]"
|
||
onClick={() => setLocale("fr-FR")}
|
||
>
|
||
Français
|
||
</GhostButton>
|
||
<GhostButton
|
||
className="w-full bg-[#35786f]"
|
||
onClick={() => setLocale("it-IT")}
|
||
>
|
||
Italiano
|
||
</GhostButton>
|
||
<GhostButton
|
||
className="w-full bg-[#35786f]"
|
||
onClick={() => setLocale("ug-CN")}
|
||
>
|
||
ئۇيغۇرچە
|
||
</GhostButton>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div></>
|
||
);
|
||
}
|