main

src/components/ui/locale-switcher.tsx

@@ -0,0 +1,67 @@
+'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 } 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 (
+    <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>
+  );
+};
+
+export default LocaleSwitcher;