chore: add translation function

packages/app/src/components/404/index.tsx

@@ -15,7 +15,7 @@ export const NotfoundPage = () => {
               router.push('/workspace');
             }}
           >
-            Back Home
+            {t('Back Home')}
           </Button>
         </p>
       </NotFoundTitle>

packages/app/src/components/create-workspace/index.tsx

@@ -53,13 +53,10 @@ export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => {
           </Header>
           <Content>
             <ContentTitle>{t('New Workspace')}</ContentTitle>
-            <p>
-              Workspace is your virtual space to capture, create and plan as
-              just one person or together as a team.
-            </p>
+            <p>{t('Workspace description')}</p>
             <Input
               onKeyDown={handleKeyDown}
-              placeholder={'Set a Workspace name'}
+              placeholder={t('Set a Workspace name')}
               onChange={value => {
                 setWorkspaceName(value);
               }}

packages/app/src/components/login-modal/index.tsx

@@ -2,6 +2,7 @@ import { styled } from '@/styles';
 import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
 import { GoogleLoginButton } from './LoginOptionButton';
 import { useAppState } from '@/providers/app-state-provider';
+import { useTranslation } from '@affine/i18n';
 interface LoginModalProps {
   open: boolean;
   onClose: () => void;
@@ -9,6 +10,7 @@ interface LoginModalProps {
 
 export const LoginModal = ({ open, onClose }: LoginModalProps) => {
   const { login } = useAppState();
+  const { t } = useTranslation();
   return (
     <Modal open={open} onClose={onClose} data-testid="login-modal">
       <ModalWrapper width={560} height={292}>
@@ -20,8 +22,8 @@ export const LoginModal = ({ open, onClose }: LoginModalProps) => {
           />
         </Header>
         <Content>
-          <ContentTitle>{'Sign in'}</ContentTitle>
-          <SignDes>Set up an AFFINE account to sync data</SignDes>
+          <ContentTitle>{t('Sign in')}</ContentTitle>
+          <SignDes>{t('Set up an AFFiNE account to sync data')}</SignDes>
           <span
             onClick={async () => {
               await login();

packages/app/src/components/logout-modal/index.tsx

@@ -3,6 +3,7 @@ import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
 import { Button } from '@/ui/button';
 import { Check, UnCheck } from './icon';
 import { useState } from 'react';
+import { useTranslation } from '@affine/i18n';
 interface LoginModalProps {
   open: boolean;
   onClose: (wait: boolean) => void;
@@ -10,6 +11,7 @@ interface LoginModalProps {
 
 export const LogoutModal = ({ open, onClose }: LoginModalProps) => {
   const [localCache, setLocalCache] = useState(false);
+  const { t } = useTranslation();
   return (
     <Modal open={open} onClose={onClose} data-testid="logout-modal">
       <ModalWrapper width={560} height={292}>
@@ -21,8 +23,8 @@ export const LogoutModal = ({ open, onClose }: LoginModalProps) => {
           />
         </Header>
         <Content>
-          <ContentTitle>{'Sign out?'}</ContentTitle>
-          <SignDes>Set up an AFFINE account to sync data</SignDes>
+          <ContentTitle>{t('Sign out')}?</ContentTitle>
+          <SignDes>{t('Set up an AFFiNE account to sync data')}</SignDes>
           <StyleTips>
             {localCache ? (
               <StyleCheck
@@ -41,7 +43,7 @@ export const LogoutModal = ({ open, onClose }: LoginModalProps) => {
                 <UnCheck></UnCheck>
               </StyleCheck>
             )}
-            Retain local cached data
+            {t('Retain local cached data')}
           </StyleTips>
           <div>
             <Button
@@ -51,7 +53,7 @@ export const LogoutModal = ({ open, onClose }: LoginModalProps) => {
                 onClose(true);
               }}
             >
-              Wait for Sync
+              {t('Wait for Sync')}
             </Button>
             <Button
               type="danger"
@@ -60,7 +62,7 @@ export const LogoutModal = ({ open, onClose }: LoginModalProps) => {
                 onClose(false);
               }}
             >
-              Force Sign Out
+              {t('Force Sign Out')}
             </Button>
           </div>
         </Content>

packages/app/src/components/workspace-modal/index.tsx

@@ -59,9 +59,7 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
             <StyledModalHeaderLeft>
               <StyledModalTitle>{t('My Workspaces')}</StyledModalTitle>
               <Tooltip
-                content={t(
-                  'A workspace is your virtual space to capture, create and plan as just one person or together as a team.'
-                )}
+                content={t('Workspace description')}
                 placement="top-start"
                 disablePortal={true}
               >
@@ -108,8 +106,8 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
               </Wrapper>
 
               <StyleWorkspaceInfo>
-                <StyleWorkspaceTitle>New workspace</StyleWorkspaceTitle>
-                <p>Crete or import</p>
+                <StyleWorkspaceTitle>{t('New Workspace')}</StyleWorkspaceTitle>
+                <p>{t('Create Or Import')}</p>
               </StyleWorkspaceInfo>
             </StyledCard>
           </StyledModalContent>