feat: use localName in dropdown (#7337)

Author: bmuenzenmeyer

apps/site/components/Common/LanguageDropDown/index.stories.tsx

@@ -8,9 +8,9 @@ type Meta = MetaObj<typeof LanguageDropDown>;
 export const Default: Story = {
   args: {
     availableLanguages: [
-      { name: 'English', code: 'en' },
-      { name: 'French', code: 'fr' },
-      { name: 'Spanish', code: 'es' },
+      { name: 'English', code: 'en', localName: 'English' },
+      { name: 'French', code: 'fr', localName: 'Français' },
+      { name: 'Spanish', code: 'es', localName: 'Español' },
     ],
     currentLanguage: 'en',
   },

apps/site/components/Common/LanguageDropDown/index.tsx

@@ -7,7 +7,7 @@ import type { FC } from 'react';
 
 import styles from './index.module.css';
 
-type SimpleLocaleConfig = Pick<LocaleConfig, 'name' | 'code'>;
+type SimpleLocaleConfig = Pick<LocaleConfig, 'name' | 'code' | 'localName'>;
 
 type LanguageDropDownProps = {
   onChange?: (newLocale: SimpleLocaleConfig) => void;
@@ -39,15 +39,15 @@ const LanguageDropdown: FC<LanguageDropDownProps> = ({
           sideOffset={5}
         >
           <div>
-            {availableLanguages.map(({ name, code }) => (
+            {availableLanguages.map(({ name, code, localName }) => (
               <DropdownMenu.Item
                 key={code}
-                onClick={() => onChange({ name, code })}
+                onClick={() => onChange({ name, code, localName })}
                 className={classNames(styles.dropDownItem, {
                   [styles.currentDropDown]: code === currentLanguage,
                 })}
               >
-                {name}
+                {localName}
               </DropdownMenu.Item>
             ))}
           </div>

apps/site/components/Containers/NavBar/index.stories.tsx

@@ -35,9 +35,9 @@ export const Default: Story = {
     ],
     languages: {
       availableLanguages: [
-        { name: 'English', code: 'en' },
-        { name: 'French', code: 'fr' },
-        { name: 'Spanish', code: 'es' },
+        { name: 'English', code: 'en', localName: 'English' },
+        { name: 'French', code: 'fr', localName: 'Français' },
+        { name: 'Spanish', code: 'es', localName: 'Español' },
       ],
       currentLanguage: 'en',
     },