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>