LocaleSwitcher.tsx

import React from 'react';
import { useTranslation } from 'react-i18next';

export const LocaleSwitcher: React.FC = () => {
  if (import.meta.env.MODE === 'production') {
    return null;
  }
  const { t, i18n } = useTranslation();
  return (
    <select
      value={i18n.language}
      onChange={(e) => i18n.changeLanguage(e.target.value)}
    >
      {
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
        Object.entries(i18n.options.resources!).map(([localeCode, _]) => (
          <option key={localeCode} value={localeCode}>
            {t('language', { lng: localeCode })}
          </option>
        ))
      }
      <option key="dev" value="dev">
        localisation keys (dev)
      </option>
    </select>
  );
};
export default LocaleSwitcher;