119 lines
3.5 KiB
TypeScript
119 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { useLocale } from "next-intl";
|
|
import { useParams } from "next/navigation";
|
|
import { locales } from "@/config";
|
|
import { usePathname, useRouter } from "@/i18n/routing";
|
|
|
|
import { useEffect, useState, useTransition } from "react";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import Image from "next/image";
|
|
import Cookies from "js-cookie";
|
|
|
|
export const getLanguage = (): string | null => {
|
|
if (typeof window === "undefined") return null;
|
|
return localStorage.getItem("language");
|
|
};
|
|
|
|
export const setLanguage = (value: string) => {
|
|
if (typeof window === "undefined") return;
|
|
localStorage.setItem("language", value);
|
|
};
|
|
|
|
export default function LocalSwitcher() {
|
|
const [isPending, startTransition] = useTransition();
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const params = useParams();
|
|
const localActive = useLocale() || "in";
|
|
const [selectedLang, setSelectedLang] = useState<string>("");
|
|
|
|
useEffect(() => {
|
|
const storedLang = getLanguage();
|
|
|
|
if (pathname.includes("polda")){
|
|
startTransition(() => {
|
|
router.replace(pathname, { locale: "in" });
|
|
});
|
|
} else {
|
|
if (!storedLang) {
|
|
setLanguage("in");
|
|
setSelectedLang("in");
|
|
|
|
startTransition(() => {
|
|
router.replace(pathname, { locale: "in" });
|
|
});
|
|
} else {
|
|
setSelectedLang(storedLang);
|
|
startTransition(() => {
|
|
router.replace(pathname, { locale: storedLang });
|
|
});
|
|
}
|
|
}
|
|
}, []);
|
|
|
|
const onSelectChange = (nextLocale: string) => {
|
|
setLanguage(nextLocale);
|
|
setSelectedLang(nextLocale);
|
|
startTransition(() => {
|
|
router.replace(pathname, { locale: nextLocale });
|
|
});
|
|
};
|
|
return (
|
|
<Select onValueChange={onSelectChange} value={selectedLang}>
|
|
<SelectTrigger className="w-[94px] border-none read-only:bg-transparent">
|
|
<SelectValue placeholder="Select a language" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="in" className="border-none">
|
|
<div className="flex items-center gap-1">
|
|
<Image
|
|
src="/images/all-img/flag-3.png"
|
|
alt="flag"
|
|
width={24}
|
|
height={24}
|
|
className="w-6 h-6 rounded-full"
|
|
/>
|
|
<span className="font-medium text-sm text-default-600 dark:text-default-700">
|
|
In
|
|
</span>
|
|
</div>
|
|
</SelectItem>
|
|
<SelectItem value="en" className="border-none">
|
|
<div className="flex items-center gap-1">
|
|
<Image
|
|
src="/images/all-img/flag-1.png"
|
|
alt="flag"
|
|
width={24}
|
|
height={24}
|
|
className="w-6 h-6 rounded-full"
|
|
/>
|
|
<span className="font-medium text-sm text-default-600 dark:text-default-700">
|
|
En
|
|
</span>
|
|
</div>
|
|
</SelectItem>
|
|
|
|
{/* <SelectItem value="ar">
|
|
<div className='flex items-center gap-1'>
|
|
<Image
|
|
src="/images/all-img/flag-2.png"
|
|
alt='flag'
|
|
width={24}
|
|
height={24}
|
|
className='w-6 h-6 rounded-full'
|
|
/>
|
|
<span className='font-medium text-sm text-default-600 dark:text-default-700'>Ar</span>
|
|
</div>
|
|
</SelectItem> */}
|
|
</SelectContent>
|
|
</Select>
|
|
);
|
|
}
|