Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-20 11:36:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: workspace setting general UI

Browse Source
This commit is contained in:
MingLiang Wang
2022-12-19 21:20:18 +08:00
parent 857504fd86
commit 983d4b2d5f
2 changed files with 95 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/workspace-setting/workspace-setting.tsx
+32 -4
View File
@@ -1,7 +1,13 @@
import Modal from '@/ui/modal';
import {
StyledAvatarUploadBtn,
StyledDeleteButtonContainer,
StyledSettingAvatar,
StyledSettingAvatarContent,
StyledSettingContainer,
StyledSettingContent,
StyledSettingH2,
StyledSettingInputContainer,
StyledSettingSidebar,
StyledSettingSidebarHeader,
StyledSettingTabContainer,
@@ -10,6 +16,8 @@ import {
} from './style';
import { EditIcon, UsersIcon, PublishIcon } from '@blocksuite/icons';
import { useState } from 'react';
import { Button } from '@/ui/button';
import Input from '@/ui/input';
enum ActiveTab {
'general' = 'general',
@@ -69,7 +77,7 @@ export const WorkspaceSetting = () => {
};
return (
<Modal open={true}>
<StyledSettingContent>
<StyledSettingContainer>
<StyledSettingSidebar>
<StyledSettingSidebarHeader>
Workspace Settings
@@ -79,8 +87,10 @@ export const WorkspaceSetting = () => {
onTabChange={handleTabChange}
/>
</StyledSettingSidebar>
{activeTab === ActiveTab.general && <GeneralPage />}
</StyledSettingContent>
<StyledSettingContent>
{activeTab === ActiveTab.general && <GeneralPage />}
</StyledSettingContent>
</StyledSettingContainer>
</Modal>
);
};
@@ -88,7 +98,25 @@ export const WorkspaceSetting = () => {
const GeneralPage = () => {
return (
<div>
<StyledSettingH2>Workspace Avatar</StyledSettingH2>
<StyledSettingH2 marginTop={56}>Workspace Avatar</StyledSettingH2>
<StyledSettingAvatarContent>
<StyledSettingAvatar alt="workspace avatar">W</StyledSettingAvatar>
<StyledAvatarUploadBtn shape="round">upload</StyledAvatarUploadBtn>
<Button shape="round">remove</Button>
</StyledSettingAvatarContent>
<StyledSettingH2 marginTop={36}>Workspace Name</StyledSettingH2>
<StyledSettingInputContainer>
<Input width={327} placeholder="Workspace Name"></Input>
</StyledSettingInputContainer>
<StyledSettingH2 marginTop={36}>Workspace Owner</StyledSettingH2>
<StyledSettingInputContainer>
<Input width={327} placeholder="Workspace Owner"></Input>
</StyledSettingInputContainer>
<StyledDeleteButtonContainer>
<Button type="danger" shape="circle">
Delete Workspace
</Button>
</StyledDeleteButtonContainer>
</div>
);
};