refactor: create public component for workspace avatar

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>