chore: language button

frontend/appflowy_tauri/src/appflowy_app/components/layout/HeaderPanel/LanguageButton.tsx

@@ -0,0 +1,15 @@
+import { EarthSvg } from '$app/components/_shared/svg/EarthSvg';
+import { useState } from 'react';
+import { LanguageSelectPopup } from '$app/components/_shared/LanguageSelectPopup';
+
+export const LanguageButton = () => {
+  const [showPopup, setShowPopup] = useState(false);
+  return (
+    <>
+      <button onClick={() => setShowPopup(!showPopup)} className={'h-5 w-5'}>
+        <EarthSvg></EarthSvg>
+      </button>
+      {showPopup && <LanguageSelectPopup onClose={() => setShowPopup(false)}></LanguageSelectPopup>}
+    </>
+  );
+};

frontend/appflowy_tauri/src/appflowy_app/components/layout/HeaderPanel/PageOptions.tsx

@@ -2,6 +2,7 @@ import { Button } from '../../_shared/Button';
 import { Details2Svg } from '../../_shared/svg/Details2Svg';
 import { usePageOptions } from './PageOptions.hooks';
 import { OptionsPopup } from './OptionsPopup';
+import { LanguageButton } from '$app/components/layout/HeaderPanel/LanguageButton';
 
 export const PageOptions = () => {
   const { showOptionsPopup, onOptionsClick, onClose, onSignOutClick } = usePageOptions();
@@ -13,7 +14,9 @@ export const PageOptions = () => {
           Share
         </Button>
 
-        <button id='option-button' className={'relative h-8 w-8'} onClick={onOptionsClick}  >
+        <LanguageButton></LanguageButton>
+
+        <button id='option-button' className={'relative h-8 w-8'} onClick={onOptionsClick}>
           <Details2Svg></Details2Svg>
         </button>
       </div>