Put locale labels outside of translations

src/components/locale-switcher.tsx

@@ -7,24 +7,26 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { locales } from '@/i18n'
+import { Locale, localeLabels } from '@/i18n'
 import { setUserLocale } from '@/lib/locale'
-import { useLocale, useTranslations } from 'next-intl'
+import { useLocale } from 'next-intl'
 
 export function LocaleSwitcher() {
-  const t = useTranslations('Locale')
-  const locale = useLocale()
+  const locale = useLocale() as Locale
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" size="sm" className="-my-3 text-primary">
-          <span>{t(locale)}</span>
+          <span>{localeLabels[locale]}</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent>
-        {locales.map((locale) => (
-          <DropdownMenuItem key={locale} onClick={() => setUserLocale(locale)}>
-            {t(locale)}
+        {Object.entries(localeLabels).map(([locale, label]) => (
+          <DropdownMenuItem
+            key={locale}
+            onClick={() => setUserLocale(locale as Locale)}
+          >
+            {label}
           </DropdownMenuItem>
         ))}
       </DropdownMenuContent>

src/i18n.ts

@@ -1,20 +1,25 @@
 import { getRequestConfig } from 'next-intl/server'
 import { getUserLocale } from './lib/locale'
 
-export const locales = [
-  'en-US',
-  'fi',
-  'fr-FR',
-  'es',
-  'de-DE',
-  'zh-CN',
-  'zh-TW',
-  'ru-RU',
-  'it-IT',
-  'ua-UA',
-  'ro',
-] as const
-export type Locale = (typeof locales)[number]
+export const localeLabels = {
+  'en-US': 'English',
+  fi: 'Suomi',
+  'fr-FR': 'Français',
+  es: 'Español',
+  'de-DE': 'Deutsch',
+  'zh-CN': '简体中文',
+  'zh-TW': '正體中文',
+  'pl-PL': 'Polski',
+  'ru-RU': 'Русский',
+  'it-IT': 'Italiano',
+  'ua-UA': 'Українська',
+  ro: 'Română',
+} as const
+
+export const locales: (keyof typeof localeLabels)[] = Object.keys(
+  localeLabels,
+) as any
+export type Locale = keyof typeof localeLabels
 export type Locales = ReadonlyArray<Locale>
 export const defaultLocale: Locale = 'en-US'