From d3584a13bdf6f15679b6ce9f0ec22a6d85036c7e Mon Sep 17 00:00:00 2001
From: Brian Muenzenmeyer <brian.muenzenmeyer@gmail.com>
Date: Fri, 20 Dec 2024 10:01:53 -0600
Subject: [PATCH] feat: use localName in dropdown (#7337)

---
 .../components/Common/LanguageDropDown/index.stories.tsx  | 6 +++---
 apps/site/components/Common/LanguageDropDown/index.tsx    | 8 ++++----
 apps/site/components/Containers/NavBar/index.stories.tsx  | 6 +++---
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/site/components/Common/LanguageDropDown/index.stories.tsx b/apps/site/components/Common/LanguageDropDown/index.stories.tsx
index 8cb9b3f37462f..2f5ac8f98f0fe 100644
--- a/apps/site/components/Common/LanguageDropDown/index.stories.tsx
+++ b/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',
   },
diff --git a/apps/site/components/Common/LanguageDropDown/index.tsx b/apps/site/components/Common/LanguageDropDown/index.tsx
index 9c71267746807..5c71e3c7b3450 100644
--- a/apps/site/components/Common/LanguageDropDown/index.tsx
+++ b/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>
diff --git a/apps/site/components/Containers/NavBar/index.stories.tsx b/apps/site/components/Containers/NavBar/index.stories.tsx
index 33a945323fb3b..5d42306a661bc 100644
--- a/apps/site/components/Containers/NavBar/index.stories.tsx
+++ b/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',
     },