feat: add workspace setting tab

packages/app/src/components/workspace-setting/index.ts

@@ -0,0 +1 @@
+export * from './workspace-setting';

packages/app/src/components/workspace-setting/style.ts

@@ -0,0 +1,80 @@
+import { styled } from '@/styles';
+
+export const StyledSettingContent = styled('div')(({ theme }) => {
+  return {
+    position: 'relative',
+    display: 'flex',
+    padding: '0px',
+    width: '1080px',
+    background: theme.colors.popoverBackground,
+    borderRadius: '12px',
+  };
+});
+
+export const StyledSettingSidebar = styled('div')(({ theme }) => {
+  {
+    return {
+      width: '236px',
+      height: '780px',
+      background: theme.mode === 'dark' ? '#272727' : '#FBFBFC',
+    };
+  }
+});
+
+export const StyledSettingSidebarHeader = styled('div')(({ theme }) => {
+  {
+    return {
+      fontWeight: '500',
+      fontSize: '18px',
+      lineHeight: '26px',
+      textAlign: 'center',
+      marginTop: '37px',
+    };
+  }
+});
+
+export const StyledSettingTabContainer = styled('ul')(({ theme }) => {
+  {
+    return {
+      display: 'flex',
+      flexDirection: 'column',
+      marginTop: '25px',
+    };
+  }
+});
+
+export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
+  ({ theme, isActive }) => {
+    {
+      return {
+        display: 'flex',
+        marginBottom: '12px',
+        padding: '0 24px',
+        height: '32px',
+        color: isActive ? theme.colors.primaryColor : theme.colors.textColor,
+        fontWeight: '400',
+        fontSize: '16px',
+        lineHeight: '32px',
+        cursor: 'pointer',
+      };
+    }
+  }
+);
+
+export const StyledSettingTagIconContainer = styled('div')(({ theme }) => {
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    marginRight: '14.64px',
+    width: '14.47px',
+    fontSize: '14.47px',
+  };
+});
+
+export const StyledSettingH2 = styled('h2')(({ theme }) => {
+  return {
+    fontWeight: '500',
+    fontSize: '18px',
+    lineHeight: '26px',
+  };
+});

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

@@ -0,0 +1,94 @@
+import Modal from '@/ui/modal';
+import {
+  StyledSettingContent,
+  StyledSettingH2,
+  StyledSettingSidebar,
+  StyledSettingSidebarHeader,
+  StyledSettingTabContainer,
+  StyledSettingTagIconContainer,
+  WorkspaceSettingTagItem,
+} from './style';
+import { EditIcon, UsersIcon, PublishIcon } from '@blocksuite/icons';
+import { useState } from 'react';
+
+enum ActiveTab {
+  'general' = 'general',
+  'members' = 'members',
+  'publish' = 'publish',
+}
+
+type SettingTabProps = {
+  activeTab: ActiveTab;
+  onTabChange?: (tab: ActiveTab) => void;
+};
+
+const WorkspaceSettingTab = ({ activeTab, onTabChange }: SettingTabProps) => {
+  return (
+    <StyledSettingTabContainer>
+      <WorkspaceSettingTagItem
+        isActive={activeTab === ActiveTab.general}
+        onClick={() => {
+          onTabChange && onTabChange(ActiveTab.general);
+        }}
+      >
+        <StyledSettingTagIconContainer>
+          <EditIcon />
+        </StyledSettingTagIconContainer>
+        General
+      </WorkspaceSettingTagItem>
+      <WorkspaceSettingTagItem
+        isActive={activeTab === ActiveTab.members}
+        onClick={() => {
+          onTabChange && onTabChange(ActiveTab.members);
+        }}
+      >
+        <StyledSettingTagIconContainer>
+          <UsersIcon />
+        </StyledSettingTagIconContainer>
+        Members
+      </WorkspaceSettingTagItem>
+      <WorkspaceSettingTagItem
+        isActive={activeTab === ActiveTab.publish}
+        onClick={() => {
+          onTabChange && onTabChange(ActiveTab.publish);
+        }}
+      >
+        <StyledSettingTagIconContainer>
+          <PublishIcon />
+        </StyledSettingTagIconContainer>
+        Publish
+      </WorkspaceSettingTagItem>
+    </StyledSettingTabContainer>
+  );
+};
+
+export const WorkspaceSetting = () => {
+  const [activeTab, setActiveTab] = useState<ActiveTab>(ActiveTab.general);
+  const handleTabChange = (tab: ActiveTab) => {
+    setActiveTab(tab);
+  };
+  return (
+    <Modal open={true}>
+      <StyledSettingContent>
+        <StyledSettingSidebar>
+          <StyledSettingSidebarHeader>
+            Workspace Settings
+          </StyledSettingSidebarHeader>
+          <WorkspaceSettingTab
+            activeTab={activeTab}
+            onTabChange={handleTabChange}
+          />
+        </StyledSettingSidebar>
+        {activeTab === ActiveTab.general && <GeneralPage />}
+      </StyledSettingContent>
+    </Modal>
+  );
+};
+
+const GeneralPage = () => {
+  return (
+    <div>
+      <StyledSettingH2>Workspace Avatar</StyledSettingH2>
+    </div>
+  );
+};