From d5832b109357cb33a6d2c0e960155b753f3e8fff Mon Sep 17 00:00:00 2001
From: MingLiang Wang <mingliangwang0o0@gmail.com>
Date: Tue, 20 Dec 2022 12:22:38 +0800
Subject: [PATCH] feat: add setting workspace UI

---
 .../src/components/workspace-setting/style.ts | 123 +++++++++++++++++-
 .../workspace-setting/workspace-setting.tsx   |  84 +++++++++++-
 packages/app/src/ui/input/input.tsx           |   5 +-
 3 files changed, 208 insertions(+), 4 deletions(-)

diff --git a/packages/app/src/components/workspace-setting/style.ts b/packages/app/src/components/workspace-setting/style.ts
index 22c1d6e344..c24c41b12a 100644
--- a/packages/app/src/components/workspace-setting/style.ts
+++ b/packages/app/src/components/workspace-setting/style.ts
@@ -17,9 +17,11 @@ export const StyledSettingContainer = styled('div')(({ theme }) => {
 export const StyledSettingSidebar = styled('div')(({ theme }) => {
   {
     return {
-      width: '236px',
+      width: '212px',
       height: '620px',
       background: theme.mode === 'dark' ? '#272727' : '#FBFBFC',
+      flexShrink: 0,
+      flexGrow: 0,
     };
   }
 });
@@ -131,6 +133,123 @@ export const StyledSettingInputContainer = styled('div')(({ theme }) => {
 
 export const StyledDeleteButtonContainer = styled('div')(({ theme }) => {
   return {
-    marginTop: '158px',
+    marginTop: '154px',
+  };
+});
+
+export const StyledMemberTitleContainer = styled('div')(({ theme }) => {
+  return {
+    display: 'flex',
+    marginTop: '60px',
+    fontWeight: '500',
+  };
+});
+
+export const StyledMemberAvatar = styled(MuiAvatar)(({ theme }) => {
+  return { height: '40px', width: '40px' };
+});
+
+export const StyledMemberNameContainer = styled('div')(({ theme }) => {
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    width: '402px',
+  };
+});
+
+export const StyledMemberRoleContainer = styled('div')(({ theme }) => {
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    width: '222px',
+  };
+});
+
+export const StyledMemberListContainer = styled('ul')(({ theme }) => {
+  return {
+    marginTop: '15px',
+    height: '432px',
+    overflowY: 'scroll',
+  };
+});
+
+export const StyledMemberListItem = styled('li')(({ theme }) => {
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    height: '72px',
+  };
+});
+
+export const StyledMemberInfo = styled('div')(({ theme }) => {
+  return {
+    paddingLeft: '12px',
+  };
+});
+
+export const StyledMemberName = styled('div')(({ theme }) => {
+  return {
+    fontWeight: '400',
+    fontSize: '18px',
+    lineHeight: '16px',
+    color: theme.colors.textColor,
+  };
+});
+
+export const StyledMemberEmail = styled('div')(({ theme }) => {
+  return {
+    fontWeight: '400',
+    fontSize: '16px',
+    lineHeight: '22px',
+    color: theme.colors.iconColor,
+  };
+});
+
+export const StyledMemberButtonContainer = styled('div')(({ theme }) => {
+  return {
+    marginTop: '14px',
+  };
+});
+
+export const StyledMoreVerticalButton = styled('button')(({ theme }) => {
+  return {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '24px',
+    height: '24px',
+    cursor: 'pointer',
+  };
+});
+
+export const StyledPublishExplanation = styled('div')(({ theme }) => {
+  return {
+    marginTop: '56px',
+    paddingRight: '48px',
+    fontWeight: '500',
+    fontSize: '18px',
+    lineHeight: '26px',
+  };
+});
+
+export const StyledPublishCopyContainer = styled('div')(({ theme }) => {
+  return {
+    marginTop: '12px',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: '38px',
+  };
+});
+
+export const StyledCopyButtonContainer = styled('div')(({ theme }) => {
+  return {
+    marginLeft: '12px',
+  };
+});
+
+export const StyledPublishContent = styled('div')(({ theme }) => {
+  return {
+    height: '494px',
   };
 });
diff --git a/packages/app/src/components/workspace-setting/workspace-setting.tsx b/packages/app/src/components/workspace-setting/workspace-setting.tsx
index d405510491..220d157c70 100644
--- a/packages/app/src/components/workspace-setting/workspace-setting.tsx
+++ b/packages/app/src/components/workspace-setting/workspace-setting.tsx
@@ -1,7 +1,22 @@
 import Modal from '@/ui/modal';
 import {
   StyledAvatarUploadBtn,
+  StyledCopyButtonContainer,
   StyledDeleteButtonContainer,
+  StyledMemberAvatar,
+  StyledMemberButtonContainer,
+  StyledMemberEmail,
+  StyledMemberInfo,
+  StyledMemberListContainer,
+  StyledMemberListItem,
+  StyledMemberName,
+  StyledMemberNameContainer,
+  StyledMemberRoleContainer,
+  StyledMemberTitleContainer,
+  StyledMoreVerticalButton,
+  StyledPublishContent,
+  StyledPublishCopyContainer,
+  StyledPublishExplanation,
   StyledSettingAvatar,
   StyledSettingAvatarContent,
   StyledSettingContainer,
@@ -14,7 +29,12 @@ import {
   StyledSettingTagIconContainer,
   WorkspaceSettingTagItem,
 } from './style';
-import { EditIcon, UsersIcon, PublishIcon } from '@blocksuite/icons';
+import {
+  EditIcon,
+  UsersIcon,
+  PublishIcon,
+  MoreVerticalIcon,
+} from '@blocksuite/icons';
 import { useState } from 'react';
 import { Button } from '@/ui/button';
 import Input from '@/ui/input';
@@ -89,6 +109,8 @@ export const WorkspaceSetting = () => {
         </StyledSettingSidebar>
         <StyledSettingContent>
           {activeTab === ActiveTab.general && <GeneralPage />}
+          {activeTab === ActiveTab.members && <MembersPage />}
+          {activeTab === ActiveTab.publish && <PublishPage />}
         </StyledSettingContent>
       </StyledSettingContainer>
     </Modal>
@@ -120,3 +142,63 @@ const GeneralPage = () => {
     </div>
   );
 };
+
+const MembersPage = () => {
+  return (
+    <div>
+      <StyledMemberTitleContainer>
+        <StyledMemberNameContainer>Users(88) </StyledMemberNameContainer>
+        <StyledMemberRoleContainer>Access level</StyledMemberRoleContainer>
+      </StyledMemberTitleContainer>
+      <StyledMemberListContainer>
+        <StyledMemberListItem>
+          <StyledMemberNameContainer>
+            <StyledMemberAvatar alt="member avatar">S</StyledMemberAvatar>
+            <StyledMemberInfo>
+              <StyledMemberName>Svaney</StyledMemberName>
+              <StyledMemberEmail>svaneyshen@gmail.com</StyledMemberEmail>
+            </StyledMemberInfo>
+          </StyledMemberNameContainer>
+          <StyledMemberRoleContainer>Workspace Owner</StyledMemberRoleContainer>
+          <StyledMoreVerticalButton>
+            <MoreVerticalIcon></MoreVerticalIcon>
+          </StyledMoreVerticalButton>
+        </StyledMemberListItem>
+      </StyledMemberListContainer>
+      <StyledMemberButtonContainer>
+        <Button type="primary" shape="circle">
+          Invite Members
+        </Button>
+      </StyledMemberButtonContainer>
+    </div>
+  );
+};
+
+const PublishPage = () => {
+  return (
+    <div>
+      <StyledPublishContent>
+        <StyledPublishExplanation>
+          After publishing to the web, everyone can view the content of this
+          workspace through the link.
+        </StyledPublishExplanation>
+        <StyledSettingH2 marginTop={48}>Share with link</StyledSettingH2>
+        <StyledPublishCopyContainer>
+          <Input
+            width={500}
+            value={'www.baidu.com/asdsadas/asdsadasd'}
+            disabled
+          ></Input>
+          <StyledCopyButtonContainer>
+            <Button type="primary" shape="circle">
+              Copy Link
+            </Button>
+          </StyledCopyButtonContainer>
+        </StyledPublishCopyContainer>
+      </StyledPublishContent>
+      <Button type="primary" shape="circle">
+        Publish to web
+      </Button>
+    </div>
+  );
+};
diff --git a/packages/app/src/ui/input/input.tsx b/packages/app/src/ui/input/input.tsx
index 920599881d..d4ddb5c0c6 100644
--- a/packages/app/src/ui/input/input.tsx
+++ b/packages/app/src/ui/input/input.tsx
@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, useState } from 'react';
+import { InputHTMLAttributes, useEffect, useState } from 'react';
 import { StyledInput } from './style';
 
 type inputProps = {
@@ -29,6 +29,9 @@ export const Input = (props: inputProps) => {
   const handleBlur: InputHTMLAttributes<HTMLInputElement>['onBlur'] = e => {
     onBlur && onBlur(e);
   };
+  useEffect(() => {
+    setValue(valueProp || '');
+  }, [valueProp]);
   return (
     <StyledInput
       value={value}