update i18n for layout

libs/components/layout/src/settings-sidebar/ContainerTabs/ContainerTabs.tsx

@@ -5,6 +5,7 @@ import {
 } from '@toeverything/components/icons';
 import { styled } from '@toeverything/components/ui';
 import { cloneElement, useCallback, useMemo, type ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Comments } from '../Comments';
 import { useActiveComment } from '../Comments/use-comments';
 import { LayoutSettings } from '../Layout';
@@ -67,7 +68,7 @@ export const ContainerTabs = () => {
         _defaultTabsKeys as unknown as string[],
         'settings'
     );
-
+    const { t } = useTranslation();
     return (
         <>
             <StyledTabsTitlesContainer>
@@ -75,7 +76,7 @@ export const ContainerTabs = () => {
                     const { type, text, icon } = tab;
                     return (
                         <TabItemTitle
-                            title={text}
+                            title={t(`stetting.${text}.title`)}
                             icon={icon}
                             isActive={activeTab === type}
                             onClick={() => {

libs/components/layout/src/settings-sidebar/Settings/SettingsList.tsx

@@ -1,8 +1,21 @@
-import { Divider, ListItem, styled, Switch } from '@toeverything/components/ui';
+import {
+    Divider,
+    ListItem,
+    Option,
+    Select,
+    styled,
+    Switch,
+} from '@toeverything/components/ui';
+import { useTranslation } from 'react-i18next';
+import { options } from '../../i18n';
 import { useSettings } from './use-settings';
 
 export const SettingsList = () => {
     const settings = useSettings();
+    const { t, i18n } = useTranslation();
+    const changeLanguage = (event: any) => {
+        i18n.changeLanguage(event);
+    };
 
     return (
         <StyledSettingsList>
@@ -32,7 +45,24 @@ export const SettingsList = () => {
 
                 return (
                     <ListItem key={item.name} onClick={() => item.onClick()}>
-                        {item.name}
+                        {t(`stetting.Settings.${item.name}`)}
+                        {item.name === 'Language' ? (
+                            <div style={{ marginLeft: '12em' }}>
+                                <Select
+                                    defaultValue="en"
+                                    onChange={changeLanguage}
+                                >
+                                    {options.map(option => (
+                                        <Option
+                                            key={option.value}
+                                            value={option.value}
+                                        >
+                                            {option.text}
+                                        </Option>
+                                    ))}
+                                </Select>
+                            </div>
+                        ) : null}
                     </ListItem>
                 );
             })}

libs/components/layout/src/settings-sidebar/Settings/footer/LastModified.tsx

@@ -1,6 +1,7 @@
 import { styled, Typography } from '@toeverything/components/ui';
 import { useUserAndSpaces } from '@toeverything/datasource/state';
 import format from 'date-fns/format';
+import { useTranslation } from 'react-i18next';
 import { usePageLastUpdated, useWorkspaceAndPageId } from '../util';
 
 export const LastModified = () => {
@@ -9,11 +10,12 @@ export const LastModified = () => {
     const { workspaceId, pageId } = useWorkspaceAndPageId();
     const lastModified = usePageLastUpdated({ workspaceId, pageId });
     const formatLastModified = format(lastModified, 'MM/dd/yyyy hh:mm');
+    const { t } = useTranslation();
     return (
         <div>
             <div>
                 <ContentText type="xs">
-                    <span>Last edited by </span>
+                    <span>{t('stetting.Settings.Last edited by')}</span>
                     <span>{username}</span>
                 </ContentText>
             </div>

libs/components/layout/src/settings-sidebar/Settings/footer/Logout.tsx

@@ -2,6 +2,7 @@ import { MoveToIcon } from '@toeverything/components/icons';
 import { ListItem, styled, Typography } from '@toeverything/components/ui';
 import { LOGOUT_COOKIES, LOGOUT_LOCAL_STORAGE } from '@toeverything/utils';
 import { getAuth, signOut } from 'firebase/auth';
+import { useTranslation } from 'react-i18next';
 
 const logout = () => {
     LOGOUT_LOCAL_STORAGE.forEach(name => localStorage.removeItem(name));
@@ -16,10 +17,13 @@ const logout = () => {
 };
 
 export const Logout = () => {
+    const { t } = useTranslation();
     return (
         <ListItem onClick={logout}>
             <StyledIcon />
-            <ContentText type="base">Logout</ContentText>
+            <ContentText type="base">
+                {t('stetting.Settings.Logout')}
+            </ContentText>
         </ListItem>
     );
 };

libs/components/layout/src/settings-sidebar/Settings/use-settings.ts

@@ -97,6 +97,13 @@ export const useSettings = (): SettingItem[] => {
                 message.success('Page link copied successfully');
             },
         },
+        {
+            type: 'button',
+            name: 'Language',
+            onClick: () => {
+                console.log('Language is change');
+            },
+        },
         {
             type: 'separator',
         },