feat: add ui component Table & add initial workspace style

packages/app/src/pages/_app.tsx

@@ -11,9 +11,8 @@ import '@fontsource/space-mono';
 import '@fontsource/poppins';
 import '../utils/print-build-info';
 import { styled } from '@/styles';
-import type { ReactNode, PropsWithChildren, FC } from 'react';
-import { cloneElement } from 'react';
-
+import ProviderComposer from '@/components/provider-composer';
+import ConfirmProvider from '@/providers/confirm-provider';
 const ThemeProvider = dynamic(() => import('@/providers/themeProvider'), {
   ssr: false,
 });
@@ -24,21 +23,15 @@ const StyledPage = styled('div')(({ theme }) => {
     backgroundColor: theme.colors.pageBackground,
     transition: 'background-color .5s',
     display: 'flex',
+    flexGrow: '1',
   };
 });
 
-const ProviderComposer: FC<
-  PropsWithChildren<{
-    contexts: any;
-  }>
-> = ({ contexts, children }) =>
-  contexts.reduceRight(
-    (kids: ReactNode, parent: any) =>
-      cloneElement(parent, {
-        children: kids,
-      }),
-    children
-  );
+const StyledWrapper = styled('div')(({ theme }) => {
+  return {
+    flexGrow: 1,
+  };
+});
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
@@ -49,11 +42,14 @@ function MyApp({ Component, pageProps }: AppProps) {
           <EditorProvider key="EditorProvider" />,
           <ThemeProvider key="ThemeProvider" />,
           <ModalProvider key="ModalProvider" />,
+          <ConfirmProvider key="ConfirmProvider" />,
         ]}
       >
         <StyledPage>
           <WorkSpaceSliderBar />
-          <Component {...pageProps} />
+          <StyledWrapper>
+            <Component {...pageProps} />
+          </StyledWrapper>
         </StyledPage>
       </ProviderComposer>
     </>

packages/app/src/pages/all-page.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Header } from '@/components/Header';
+import { styled } from '@/styles';
+import { Table, TableCell, TableHead, TableRow, TableBody } from '../ui/table';
+import { useConfirm } from '@/providers/confirm-provider';
+const StyledTableContainer = styled.div(() => {
+  return {
+    height: 'calc(100vh - 60px)',
+    padding: '78px 72px',
+    overflowY: 'auto',
+  };
+});
+export const AllPage = () => {
+  const { confirm } = useConfirm();
+  return (
+    <>
+      <Header />
+      <button
+        onClick={() => {
+          confirm({
+            title: 'Permanently delete',
+            content: "Once deleted, you can't undo this action.Do you confirm?",
+            confirmText: 'Delete',
+            confirmType: 'danger',
+          });
+        }}
+      >
+        click to show confirm
+      </button>
+      <StyledTableContainer>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell proportion={0.5}>Documents</TableCell>
+              <TableCell proportion={0.2}>Created</TableCell>
+              <TableCell proportion={0.2}>Uploaded</TableCell>
+              <TableCell proportion={0.1}></TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {new Array(100).fill(0).map((_, index) => {
+              return (
+                <TableRow key={index}>
+                  <TableCell ellipsis={true}>
+                    This is a long, very long, extremely long, incredibly long,
+                    exceedingly long, very long document title
+                  </TableCell>
+                  <TableCell ellipsis={true}>2022-11-02 18:30</TableCell>
+                  <TableCell ellipsis={true}>2022-11-02 18:30</TableCell>
+                  <TableCell>...</TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </StyledTableContainer>
+    </>
+  );
+};
+
+export default AllPage;

packages/app/src/pages/index.tsx

@@ -1,6 +1,6 @@
 import type { NextPage } from 'next';
 import { styled } from '@/styles';
-import { Header } from '@/components/Header';
+import { PageHeader } from '@/components/Header';
 import { FAQ } from '@/components/faq';
 import EdgelessToolbar from '@/components/edgeless-toolbar';
 import MobileModal from '@/components/mobile-modal';
@@ -14,26 +14,17 @@ const StyledEditorContainer = styled('div')(({ theme }) => {
   };
 });
 
-const StyledWrapper = styled('div')(({ theme }) => {
-  return {
-    height: '100vh',
-    backgroundColor: theme.colors.pageBackground,
-    transition: 'background-color .5s',
-    flexGrow: 1,
-  };
-});
-
 const Home: NextPage = () => {
   return (
-    <StyledWrapper>
-      <Header />
+    <>
+      <PageHeader />
       <MobileModal />
       <StyledEditorContainer>
         <Editor />
       </StyledEditorContainer>
       <FAQ />
       <EdgelessToolbar />
-    </StyledWrapper>
+    </>
   );
 };