95 lines
2.9 KiB
TypeScript
95 lines
2.9 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, useTransition } from "react";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import Image from "next/image";
|
|
import Cookies from "js-cookie";
|
|
|
|
export default function LocalSwitcher() {
|
|
const [isPending, startTransition] = useTransition();
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const params = useParams();
|
|
const localActive = useLocale() || "in";
|
|
const defaultLocale = Cookies.get("locale");
|
|
|
|
useEffect(() => {
|
|
console.log("locale", defaultLocale);
|
|
|
|
if (!defaultLocale) {
|
|
Cookies.set("locale", "in");
|
|
startTransition(() => {
|
|
router.replace(pathname, { locale: "in" });
|
|
});
|
|
}
|
|
}, []);
|
|
|
|
const onSelectChange = (nextLocale: string) => {
|
|
startTransition(() => {
|
|
router.replace(pathname, { locale: nextLocale });
|
|
});
|
|
Cookies.set("locale", nextLocale);
|
|
};
|
|
return (
|
|
<Select onValueChange={onSelectChange} defaultValue={localActive}>
|
|
<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>
|
|
);
|
|
}
|