chore: add translation function

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

@@ -4,6 +4,7 @@ import { WorkspaceAvatar } from '@/components/workspace-avatar';
 import { IconButton } from '@/ui/button';
 import { useAppState } from '@/providers/app-state-provider';
 import { StyledFooter, StyleUserInfo, StyleSignIn } from './styles';
+import { useTranslation } from '@affine/i18n';
 
 export const Footer = ({
   onLogin,
@@ -13,6 +14,7 @@ export const Footer = ({
   onLogout: () => void;
 }) => {
   const { user } = useAppState();
+  const { t } = useTranslation();
 
   return (
     <StyledFooter>
@@ -48,7 +50,7 @@ export const Footer = ({
           <span>
             <CloudInsyncIcon fontSize={16} />
           </span>
-          Sign in to sync with AFFINE Cloud
+          {t('Sign in')}
         </StyleSignIn>
       )}
     </StyledFooter>

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

@@ -9,6 +9,7 @@ import { WorkspaceUnit } from '@affine/datacenter';
 import { useAppState } from '@/providers/app-state-provider';
 import { StyleWorkspaceInfo, StyleWorkspaceTitle, StyledCard } from './styles';
 import { Wrapper } from '@/ui/layout';
+import { useTranslation } from '@affine/i18n';
 
 export const WorkspaceCard = ({
   workspaceData,
@@ -18,7 +19,7 @@ export const WorkspaceCard = ({
   onClick: (data: WorkspaceUnit) => void;
 }) => {
   const { currentWorkspace, isOwner } = useAppState();
-
+  const { t } = useTranslation();
   return (
     <StyledCard
       onClick={() => {
@@ -38,29 +39,30 @@ export const WorkspaceCard = ({
           workspaceData.provider === 'local' ? (
             <p>
               <LocalIcon />
-              Local Workspace
+              {t('Local Workspace')}
             </p>
           ) : (
             <p>
               <CloudIcon />
-              Cloud Workspace
+              {t('Cloud Workspace')}
             </p>
           )
         ) : (
           <p>
             <UsersIcon fontSize={20} color={'#FF646B'} />
-            Joined Workspace
+            {t('Joined Workspace')}
           </p>
         )}
         {workspaceData.provider === 'local' && (
           <p>
             <OfflineIcon />
-            All data can be accessed offline
+            {t('Available Offline')}
           </p>
         )}
         {workspaceData.published && (
           <p>
-            <PublishIcon fontSize={16} /> Published to Web
+            <PublishIcon fontSize={16} />
+            {t('Published to Web')}
           </p>
         )}
       </StyleWorkspaceInfo>