boilerplate-fe/src/components/ui/locale-switcher.tsx

'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;