57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
"use client";
|
||
|
||
import { getCookie, setCookie } from "cookies-next";
|
||
import { useRouter } from "next/navigation";
|
||
import { useState, useEffect } from "react";
|
||
import Link from "next/link";
|
||
|
||
export default function SelectLanguage() {
|
||
const router = useRouter();
|
||
const [isOpen, setisOpen] = useState(false);
|
||
const [currentLocale, setCurrentLocale] = useState("");
|
||
|
||
useEffect(() => {
|
||
const sl = getCookie("selectedLocale");
|
||
const dl = getCookie("defaultLocale");
|
||
setCurrentLocale(sl || dl || "en");
|
||
}, []);
|
||
|
||
return (
|
||
<div className="relative flex min-w-[100px] justify-center">
|
||
<p
|
||
onClick={() => setisOpen(!isOpen)}
|
||
className="mx-2 mb-[5px] cursor-pointer select-none whitespace-nowrap border-b-2 border-[#FD6F00] px-2 py-[10px] pb-[5px] text-[15px] font-[600] text-[#FD6F00] hover:text-[#FD6F00] xl:text-[20px]"
|
||
>
|
||
{currentLocale}
|
||
</p>
|
||
|
||
<ul
|
||
className={`absolute start-0 z-20 flex w-full flex-col items-center gap-2 rounded-lg border bg-white dark:bg-zinc-900 dark:text-white text-black py-3 transition-all ${isOpen ? "top-[50px] scale-100" : "top-0 scale-0"}`}
|
||
>
|
||
<Link
|
||
href=""
|
||
className="w-[70%] border-b-2 border-[rgba(0,0,0,0)] dark:text-white text-black pb-1 text-center hover:cursor-pointer hover:border-[#FD6F00] dark:hover:text-[#FD6F00]"
|
||
onClick={(e) => {
|
||
e.preventDefault();
|
||
setCookie("selectedLocale", "fa"), router.refresh();
|
||
setisOpen(false);
|
||
}}
|
||
>
|
||
فارسی
|
||
</Link>
|
||
<Link
|
||
href=""
|
||
className="w-[70%] border-b-2 border-[rgba(0,0,0,0)] dark:text-white text-black pb-1 text-center hover:cursor-pointer hover:border-[#FD6F00] dark:hover:text-[#FD6F00]"
|
||
onClick={(e) => {
|
||
e.preventDefault();
|
||
setCookie("selectedLocale", "en"), router.refresh();
|
||
setisOpen(false);
|
||
}}
|
||
>
|
||
English
|
||
</Link>
|
||
</ul>
|
||
</div>
|
||
);
|
||
}
|