add logic to switch lang

libs/remix-ui/home-tab/src/lib/components/homeTablangOptions.tsx

@@ -1,18 +1,25 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
 import DropdownItem from "react-bootstrap/DropdownItem";
 
-export function LanguageOptions() {
+export function LanguageOptions({ plugin }: { plugin: any }) {
-  const langOptions = ['EN', 'ES', 'FR', 'ZH'] //get languages from locale
+  const [langOptions, setLangOptions] = useState<string>('') //get languages from locale
-  const changeLanguage = (e: any) => {
+  const changeLanguage = async (lang: string) => {
-    //change language
+    await plugin.call('locale', 'switchLocale', lang)
   }
   return (
     <>
       <div className="d-flex align-items-center justify-content-end mx-1">
-        <DropdownButton title="EN" id="langdropdown" size="sm">
+        <DropdownButton title={langOptions} id="langdropdown" size="sm">
-          {langOptions.map(lang => (
+          {['EN', 'ES', 'FR', 'ZH'].map(lang => (
-            <DropdownItem as={'span'} onClick={changeLanguage}>{lang}</DropdownItem>
+            <DropdownItem as={'span'} onClick={() =>
+            {
+              changeLanguage(lang.toLowerCase())
+              setLangOptions(lang)
+            }}
+            >
+              {lang}
+            </DropdownItem>
           ))}
         </DropdownButton>
       </div>

libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx

@@ -61,7 +61,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
             <HomeTabLearn plugin={plugin} />
           </div>
           <div className="pl-2 pr-3 justify-content-start d-flex flex-column" style={{width: '65%'}} id="remixUIHTRight">
-            <LanguageOptions />
+            <LanguageOptions plugin={plugin}/>
             <HomeTabFeatured></HomeTabFeatured>
             <HomeTabGetStarted plugin={plugin}></HomeTabGetStarted>
             <HomeTabFeaturedPlugins plugin={plugin}></HomeTabFeaturedPlugins>