feat: add ui component Table & add initial workspace style

packages/app/src/components/Header/header.tsx

@@ -0,0 +1,127 @@
+import React, { PropsWithChildren, useEffect, useState } from 'react';
+import {
+  LogoIcon,
+  MoreIcon,
+  ExportIcon,
+  Export2Markdown,
+  Export2HTML,
+  RightArrow,
+} from './icons';
+import {
+  StyledHeader,
+  StyledTitle,
+  StyledTitleWrapper,
+  StyledLogo,
+  StyledHeaderRightSide,
+  IconButton,
+  StyledHeaderContainer,
+  StyledBrowserWarning,
+  StyledCloseButton,
+  StyledMenuItemWrapper,
+} from './styles';
+import { useEditor } from '@/providers/editor-provider';
+import EditorModeSwitch from '@/components/editor-mode-switch';
+import { EdgelessIcon, PaperIcon } from '../editor-mode-switch/icons';
+import ThemeModeSwitch from '@/components/theme-mode-switch';
+import { useModal } from '@/providers/global-modal-provider';
+import CloseIcon from '@mui/icons-material/Close';
+import { getWarningMessage, shouldShowWarning } from './utils';
+import { Menu, MenuItem } from '@/ui/menu';
+
+const PopoverContent = () => {
+  const { editor, mode, setMode } = useEditor();
+  return (
+    <>
+      <MenuItem
+        onClick={() => {
+          setMode(mode === 'page' ? 'edgeless' : 'page');
+        }}
+      >
+        <StyledMenuItemWrapper>
+          {mode === 'page' ? <EdgelessIcon /> : <PaperIcon />}
+          Convert to {mode === 'page' ? 'Edgeless' : 'Page'}
+        </StyledMenuItemWrapper>
+      </MenuItem>
+      <Menu
+        placement="left-start"
+        content={
+          <>
+            <MenuItem
+              onClick={() => {
+                editor && editor.contentParser.onExportHtml();
+              }}
+            >
+              <StyledMenuItemWrapper>
+                <Export2HTML />
+                Export to HTML
+              </StyledMenuItemWrapper>
+            </MenuItem>
+            <MenuItem
+              onClick={() => {
+                editor && editor.contentParser.onExportMarkdown();
+              }}
+            >
+              <StyledMenuItemWrapper>
+                <Export2Markdown />
+                Export to Markdown
+              </StyledMenuItemWrapper>
+            </MenuItem>
+          </>
+        }
+      >
+        <MenuItem>
+          <StyledMenuItemWrapper>
+            <ExportIcon />
+            Export
+            <RightArrow />
+          </StyledMenuItemWrapper>
+        </MenuItem>
+      </Menu>
+    </>
+  );
+};
+
+const BrowserWarning = ({
+  show,
+  onClose,
+}: {
+  show: boolean;
+  onClose: () => void;
+}) => {
+  return (
+    <StyledBrowserWarning show={show}>
+      {getWarningMessage()}
+      <StyledCloseButton onClick={onClose}>
+        <CloseIcon />
+      </StyledCloseButton>
+    </StyledBrowserWarning>
+  );
+};
+
+export const Header = ({ children }: PropsWithChildren<{}>) => {
+  const [showWarning, setShowWarning] = useState(shouldShowWarning());
+
+  return (
+    <StyledHeaderContainer hasWarning={showWarning}>
+      <BrowserWarning
+        show={showWarning}
+        onClose={() => {
+          setShowWarning(false);
+        }}
+      />
+      <StyledHeader hasWarning={showWarning}>
+        {children}
+        <StyledHeaderRightSide>
+          <ThemeModeSwitch />
+          <Menu content={<PopoverContent />} placement="bottom-end">
+            <IconButton>
+              <MoreIcon />
+            </IconButton>
+          </Menu>
+        </StyledHeaderRightSide>
+      </StyledHeader>
+    </StyledHeaderContainer>
+  );
+};
+
+export default Header;

packages/app/src/components/Header/index.tsx

@@ -1,165 +1,2 @@
-import React, { useEffect, useState } from 'react';
-import {
-  LogoIcon,
-  MoreIcon,
-  ExportIcon,
-  Export2Markdown,
-  Export2HTML,
-  RightArrow,
-} from './icons';
-import {
-  StyledHeader,
-  StyledTitle,
-  StyledTitleWrapper,
-  StyledLogo,
-  StyledHeaderRightSide,
-  IconButton,
-  StyledHeaderContainer,
-  StyledBrowserWarning,
-  StyledCloseButton,
-  StyledMenuItemWrapper,
-} from './styles';
-import { useEditor } from '@/providers/editor-provider';
-import EditorModeSwitch from '@/components/editor-mode-switch';
-import { EdgelessIcon, PaperIcon } from '../editor-mode-switch/icons';
-import ThemeModeSwitch from '@/components/theme-mode-switch';
-import { useModal } from '@/providers/global-modal-provider';
-import CloseIcon from '@mui/icons-material/Close';
-import { getWarningMessage, shouldShowWarning } from './utils';
-import { Menu, MenuItem } from '@/ui/menu';
-
-const PopoverContent = () => {
-  const { editor, mode, setMode } = useEditor();
-  return (
-    <>
-      <MenuItem
-        onClick={() => {
-          setMode(mode === 'page' ? 'edgeless' : 'page');
-        }}
-      >
-        <StyledMenuItemWrapper>
-          {mode === 'page' ? <EdgelessIcon /> : <PaperIcon />}
-          Convert to {mode === 'page' ? 'Edgeless' : 'Page'}
-        </StyledMenuItemWrapper>
-      </MenuItem>
-      <Menu
-        placement="left-start"
-        content={
-          <>
-            <MenuItem
-              onClick={() => {
-                editor && editor.contentParser.onExportHtml();
-              }}
-            >
-              <StyledMenuItemWrapper>
-                <Export2HTML />
-                Export to HTML
-              </StyledMenuItemWrapper>
-            </MenuItem>
-            <MenuItem
-              onClick={() => {
-                editor && editor.contentParser.onExportMarkdown();
-              }}
-            >
-              <StyledMenuItemWrapper>
-                <Export2Markdown />
-                Export to Markdown
-              </StyledMenuItemWrapper>
-            </MenuItem>
-          </>
-        }
-      >
-        <MenuItem>
-          <StyledMenuItemWrapper>
-            <ExportIcon />
-            Export
-            <RightArrow />
-          </StyledMenuItemWrapper>
-        </MenuItem>
-      </Menu>
-    </>
-  );
-};
-
-const BrowserWarning = ({
-  show,
-  onClose,
-}: {
-  show: boolean;
-  onClose: () => void;
-}) => {
-  return (
-    <StyledBrowserWarning show={show}>
-      {getWarningMessage()}
-      <StyledCloseButton onClick={onClose}>
-        <CloseIcon />
-      </StyledCloseButton>
-    </StyledBrowserWarning>
-  );
-};
-
-export const Header = () => {
-  const [title, setTitle] = useState('');
-  const [isHover, setIsHover] = useState(false);
-  const [showWarning, setShowWarning] = useState(shouldShowWarning());
-
-  const { contactModalHandler } = useModal();
-  const { editor } = useEditor();
-
-  useEffect(() => {
-    console.log('header', editor);
-
-    if (editor?.model) {
-      setTitle(editor.model.title ?? '');
-      editor.model.propsUpdated.on(() => {
-        setTitle(editor.model.title);
-      });
-    }
-  }, [editor]);
-  return (
-    <StyledHeaderContainer hasWarning={showWarning}>
-      <BrowserWarning
-        show={showWarning}
-        onClose={() => {
-          setShowWarning(false);
-        }}
-      />
-      <StyledHeader hasWarning={showWarning}>
-        {/*<StyledLogo*/}
-        {/*  onClick={() => {*/}
-        {/*    contactModalHandler(true);*/}
-        {/*  }}*/}
-        {/*>*/}
-        {/*  <LogoIcon />*/}
-        {/*</StyledLogo>*/}
-        {title ? (
-          <StyledTitle
-            onMouseEnter={() => {
-              setIsHover(true);
-            }}
-            onMouseLeave={() => {
-              setIsHover(false);
-            }}
-          >
-            <EditorModeSwitch
-              isHover={isHover}
-              style={{
-                marginRight: '12px',
-              }}
-            />
-            <StyledTitleWrapper>{title}</StyledTitleWrapper>
-          </StyledTitle>
-        ) : null}
-
-        <StyledHeaderRightSide>
-          <ThemeModeSwitch />
-          <Menu content={<PopoverContent />} placement="bottom-end">
-            <IconButton>
-              <MoreIcon />
-            </IconButton>
-          </Menu>
-        </StyledHeaderRightSide>
-      </StyledHeader>
-    </StyledHeaderContainer>
-  );
-};
+export * from './header';
+export * from './page-header';

packages/app/src/components/Header/page-header.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react';
+import { StyledTitle, StyledTitleWrapper } from './styles';
+import { useEditor } from '@/providers/editor-provider';
+import EditorModeSwitch from '@/components/editor-mode-switch';
+
+import Header from './header';
+
+export const PageHeader = () => {
+  const [title, setTitle] = useState('');
+  const [isHover, setIsHover] = useState(false);
+
+  const { editor } = useEditor();
+
+  useEffect(() => {
+    if (editor?.model) {
+      setTitle(editor.model.title ?? '');
+      editor.model.propsUpdated.on(() => {
+        setTitle(editor.model.title);
+      });
+    }
+  }, [editor]);
+
+  return (
+    <Header>
+      {title ? (
+        <StyledTitle
+          onMouseEnter={() => {
+            setIsHover(true);
+          }}
+          onMouseLeave={() => {
+            setIsHover(false);
+          }}
+        >
+          <EditorModeSwitch
+            isHover={isHover}
+            style={{
+              marginRight: '12px',
+            }}
+          />
+          <StyledTitleWrapper>{title}</StyledTitleWrapper>
+        </StyledTitle>
+      ) : null}
+    </Header>
+  );
+};
+
+export default PageHeader;

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

@@ -1,22 +1,26 @@
 import React, { useState } from 'react';
+import Router from 'next/router';
 import {
   StyledArrowButton,
   StyledListItem,
+  StyledNewPageButton,
   StyledSliderBar,
   StyledSubListItem,
-  StyledWrapper,
 } from './style';
 import { Arrow } from './icons';
-
 export const WorkSpaceSliderBar = () => {
   const [show, setShow] = useState(false);
   return (
     <>
-
       <StyledSliderBar show={show}>
-
         <StyledListItem>Quick search</StyledListItem>
-        <StyledListItem>All pages</StyledListItem>
+        <StyledListItem
+          onClick={() => {
+            Router.push('/all-page');
+          }}
+        >
+          All pages
+        </StyledListItem>
         <StyledListItem>Favourites</StyledListItem>
         <StyledSubListItem>
           document 1, this is a paper icondocument 1
@@ -25,6 +29,8 @@ export const WorkSpaceSliderBar = () => {
         <StyledSubListItem>document 4</StyledSubListItem>
         <StyledListItem>Import</StyledListItem>
         <StyledListItem>Bin</StyledListItem>
+
+        <StyledNewPageButton>New Page</StyledNewPageButton>
       </StyledSliderBar>
       <StyledArrowButton
         isShow={show}

packages/app/src/components/workspace-slider-bar/style.ts

@@ -12,16 +12,11 @@ export const StyledSliderBar = styled.div<{ show: boolean }>(
       zIndex: theme.zIndex.modal,
       padding: show ? '24px 12px' : '24px 0',
       overflowX: 'hidden',
+      flexShrink: 0,
     };
   }
 );
-export const StyledWrapper = styled.div(() => {
-  return {
-    // padding: '24px 12px',
-    // height: '100%',
-    // overflowY: 'auto',
-  };
-});
+
 export const StyledArrowButton = styled.button<{ isShow: boolean }>(
   ({ theme, isShow }) => {
     return {
@@ -54,6 +49,8 @@ export const StyledListItem = styled.button(({ theme }) => {
     marginTop: '12px',
     fontSize: theme.font.sm,
     color: theme.colors.popoverColor,
+    padding: '0 12px',
+    borderRadius: '5px',
     ...displayFlex('flex-start', 'center'),
     ':hover': {
       color: theme.colors.primaryColor,
@@ -62,13 +59,22 @@ export const StyledListItem = styled.button(({ theme }) => {
   };
 });
 
+export const StyledNewPageButton = styled(StyledListItem)(({ theme }) => {
+  return {
+    position: 'absolute',
+    bottom: '24px',
+    left: '0',
+    right: '0',
+    margin: 'auto',
+  };
+});
+
 export const StyledSubListItem = styled.button(({ theme }) => {
   return {
     width: '296px',
     height: '32px',
     marginTop: '4px',
     fontSize: theme.font.sm,
-    fontWeight: 400,
     color: theme.colors.popoverColor,
     paddingLeft: '45px',
     lineHeight: '32px',
@@ -77,7 +83,6 @@ export const StyledSubListItem = styled.button(({ theme }) => {
     ':hover': {
       color: theme.colors.primaryColor,
       backgroundColor: theme.colors.hoverBackground,
-      fontWeight: 500,
     },
   };
 });