fix sychronized state for locale change

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

@@ -1,6 +1,9 @@
 import React, { useEffect, useState } from 'react'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
-import DropdownItem from "react-bootstrap/DropdownItem";
+import DropdownItem from 'react-bootstrap/DropdownItem'
+import { localeLang } from './types/carouselTypes'
+
+
 
 export function LanguageOptions({ plugin }: { plugin: any }) {
   const [langOptions, setLangOptions] = useState<string>()
@@ -15,6 +18,12 @@ export function LanguageOptions({ plugin }: { plugin: any }) {
     })
   }, [langOptions])
 
+  useEffect(() => {
+    plugin.on('locale', 'localeChanged', (lang: localeLang) => {
+      setLangOptions(lang.code.toUpperCase())
+    })
+  }, [langOptions])
+
   return (
     <>
       <div className="d-flex align-items-center justify-content-end mr-2">

libs/remix-ui/home-tab/src/lib/components/types/carouselTypes.ts

@@ -114,3 +114,10 @@ export default class Carousel extends React.Component<CarouselProps> {
   direction: Direction;
   containerRef: React.RefObject<HTMLDivElement>;
 }
+
+export type localeLang = {
+  code: string
+  localeName: string
+  messages: { [key: string]: string }
+  name: string
+}