refactor: create public component for workspace avatar

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

@@ -0,0 +1,30 @@
+import { stringToColour } from '@/utils';
+
+interface IWorkspaceAvatar {
+  size: number;
+  name: string;
+}
+
+export const WorkspaceAvatar = (props: IWorkspaceAvatar) => {
+  const size = props.size || 20;
+  const sizeStr = size + 'px';
+  return (
+    <>
+      <div
+        style={{
+          width: sizeStr,
+          height: sizeStr,
+          border: '1px solid #fff',
+          color: '#fff',
+          fontSize: Math.ceil(0.5 * size) + 'px',
+          background: stringToColour(props.name || 'AFFiNE'),
+          borderRadius: '50%',
+          textAlign: 'center',
+          lineHeight: sizeStr,
+        }}
+      >
+        {(props.name || 'AFFiNE').substring(0, 1)}
+      </div>
+    </>
+  );
+};

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

@@ -21,7 +21,7 @@ import {
 } from '@blocksuite/icons';
 import { useConfirm } from '@/providers/confirm-provider';
 import { toast } from '@/ui/toast';
-import { stringToColour } from '@/utils';
+import { WorkspaceAvatar } from '@/components/workspace-avatar';
 interface LoginModalProps {
   open: boolean;
   onClose: () => void;
@@ -82,18 +82,9 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
                           marginTop: '6px',
                           marginLeft: '10px',
                           marginRight: '10px',
-                          width: '50px',
-                          height: '50px',
-                          border: '1px solid #fff',
-                          color: '#fff',
-                          fontSize: '22px',
-                          background: stringToColour(item.name || 'AFFiNE'),
-                          borderRadius: '50%',
-                          textAlign: 'center',
-                          lineHeight: '50px',
                         }}
                       >
-                        {(item.name || 'AFFiNE').substring(0, 1)}
+                        <WorkspaceAvatar size={50} name={item.name} />
                       </div>
 
                       <span

packages/app/src/components/workspace-setting/general/general.tsx

@@ -21,7 +21,7 @@ import {
   User,
   Workspace,
 } from '@/hooks/mock-data/mock';
-import { stringToColour } from '@/utils';
+import { WorkspaceAvatar } from '@/components/workspace-avatar';
 export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
   const { currentWorkspace, refreshWorkspacesMeta } = useAppState();
   useEffect(() => {
@@ -85,19 +85,11 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
         <div
           style={{
             float: 'left',
-            width: '60px',
+
-            height: '60px',
-            border: '1px solid #fff',
-            color: '#fff',
-            fontSize: '26px',
-            background: stringToColour(workspace?.name ?? 'AFFiNE'),
-            borderRadius: '50%',
-            textAlign: 'center',
-            lineHeight: '60px',
             marginRight: '5px',
           }}
         >
-          {(workspace?.name ?? 'AFFiNE').substring(0, 1)}
+          <WorkspaceAvatar size={60} name={workspace.name} />
         </div>
         <Upload
           accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"

packages/app/src/components/workspace-setting/workspace-setting.tsx

@@ -62,6 +62,7 @@ enum ActiveTab {
   'members' = 'members',
   'publish' = 'publish',
   'sync' = 'sync',
+  'export' = 'export',
 }
 
 type SettingTabProps = {
@@ -125,9 +126,9 @@ const WorkspaceSettingTab = ({ activeTab, onTabChange }: SettingTabProps) => {
       </WorkspaceSettingTagItem>
 
       <WorkspaceSettingTagItem
-        isActive={activeTab === ActiveTab.publish}
+        isActive={activeTab === ActiveTab.export}
         onClick={() => {
-          onTabChange && onTabChange(ActiveTab.publish);
+          onTabChange && onTabChange(ActiveTab.export);
         }}
       >
         <StyledSettingTagIconContainer>

packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx

@@ -2,8 +2,8 @@ import { Avatar, WorkspaceName, SelectorWrapper } from './styles';
 import { useEffect, useState } from 'react';
 // import { AffineIcon } from '../icons/icons';
 import { WorkspaceModal } from '@/components/workspace-modal';
+import { WorkspaceAvatar } from '@/components/workspace-avatar';
 import { getActiveWorkspace, getWorkspaces } from '@/hooks/mock-data/mock';
-import { stringToColour } from '@/utils';
 export const WorkspaceSelector = () => {
   const [workspaceListShow, setWorkspaceListShow] = useState(false);
   const [workspace, setWorkSpace] = useState(getActiveWorkspace());
@@ -37,18 +37,9 @@ export const WorkspaceSelector = () => {
           <div
             style={{
               float: 'left',
-              width: '28px',
-              height: '28px',
-              border: '1px solid #fff',
-              color: '#fff',
-              fontSize: '14px',
-              background: stringToColour(workspace?.name ?? 'AFFiNE'),
-              borderRadius: '50%',
-              textAlign: 'center',
-              lineHeight: '28px',
             }}
           >
-            {(workspace?.name ?? 'AFFiNE').substring(0, 1)}
+            <WorkspaceAvatar size={28} name={workspace.name} />
           </div>
         </Avatar>
         <WorkspaceName data-testid="workspace-name">