70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import React, { useTransition } from "react";
|
|
import { Locale, useLocale } from "next-intl";
|
|
import {
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectRoot,
|
|
SelectTrigger,
|
|
SelectValueText,
|
|
} from "@/components/ui/collections/select";
|
|
import { useParams } from "next/navigation";
|
|
import { createListCollection, ClientOnly } from "@chakra-ui/react";
|
|
import { usePathname, useRouter } from "@/i18n/navigation";
|
|
|
|
const LocaleSwitcher = () => {
|
|
const locale = useLocale();
|
|
const [isPending, startTransition] = useTransition();
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const params = useParams();
|
|
|
|
const collections = createListCollection({
|
|
items: [
|
|
{ label: "English", value: "en" },
|
|
{ label: "Türkçe", value: "tr" },
|
|
],
|
|
});
|
|
|
|
function onSelectChange({ value }: { value: string[] }) {
|
|
const nextLocale = value.at(0) as Locale;
|
|
startTransition(() => {
|
|
router.replace(
|
|
// @ts-expect-error -- TypeScript will validate that only known `params`
|
|
// are used in combination with a given `pathname`. Since the two will
|
|
// always match for the current route, we can skip runtime checks.
|
|
{ pathname, params },
|
|
{ locale: nextLocale },
|
|
);
|
|
});
|
|
}
|
|
return (
|
|
<ClientOnly fallback={<div style={{ height: "32px" }} />}>
|
|
<SelectRoot
|
|
disabled={isPending}
|
|
value={[locale]}
|
|
onValueChange={onSelectChange}
|
|
w={{ base: "full", lg: "24" }}
|
|
size="sm"
|
|
variant="outline"
|
|
borderRadius="md"
|
|
collection={collections}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValueText placeholder="Select a language" />
|
|
</SelectTrigger>
|
|
<SelectContent zIndex="9999">
|
|
{collections.items.map((collection) => (
|
|
<SelectItem key={collection.value} item={collection}>
|
|
{collection.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</SelectRoot>
|
|
</ClientOnly>
|
|
);
|
|
};
|
|
|
|
export default LocaleSwitcher;
|