feat: add import modal

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

@@ -16,7 +16,7 @@ export const FAQ = () => {
   const [showContent, setShowContent] = useState(false);
   const { mode } = useTheme();
   const { mode: editorMode } = useEditor();
-  const { shortcutsModalHandler, triggerContactModal } = useModal();
+  const { triggerShortcutsModal, triggerContactModal } = useModal();
   const isEdgelessDark = mode === 'dark' && editorMode === 'edgeless';
 
   return (
@@ -38,7 +38,7 @@ export const FAQ = () => {
                 isEdgelessDark={isEdgelessDark}
                 onClick={() => {
                   setShowContent(false);
-                  triggerContactModal(true);
+                  triggerContactModal();
                 }}
               >
                 <ContactIcon />
@@ -50,7 +50,7 @@ export const FAQ = () => {
                 isEdgelessDark={isEdgelessDark}
                 onClick={() => {
                   setShowContent(false);
-                  shortcutsModalHandler(true);
+                  triggerShortcutsModal();
                 }}
               >
                 <KeyboardIcon />
@@ -74,14 +74,3 @@ export const FAQ = () => {
     </>
   );
 };
-
-const routesLIst: any = [
-  {
-    path: '/',
-    children: [
-      {
-        element: <HelpIcon />,
-      },
-    ],
-  },
-];

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

@@ -0,0 +1,59 @@
+import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
+import { StyledButtonWrapper, StyledTitle } from './styles';
+import { Button } from '@/ui/button';
+import { Wrapper } from '@/ui/layout';
+import { Loading } from '@/components/loading';
+import { useEffect, useState } from 'react';
+type ImportModalProps = {
+  open: boolean;
+  onClose: () => void;
+};
+export const ImportModal = ({ open, onClose }: ImportModalProps) => {
+  const [status, setStatus] = useState<'unImported' | 'importing'>(
+    'unImported'
+  );
+
+  useEffect(() => {
+    if (status === 'importing') {
+      setTimeout(() => {
+        setStatus('unImported');
+      }, 3000);
+    }
+  }, [status]);
+
+  return (
+    <Modal open={open} onClose={onClose}>
+      <ModalWrapper width={460} height={240}>
+        <ModalCloseButton onClick={onClose} />
+        <StyledTitle>Import</StyledTitle>
+
+        {status === 'unImported' && (
+          <StyledButtonWrapper>
+            <Button
+              onClick={() => {
+                setStatus('importing');
+              }}
+            >
+              Markdown
+            </Button>
+            <Button
+              onClick={() => {
+                setStatus('importing');
+              }}
+            >
+              HTML
+            </Button>
+          </StyledButtonWrapper>
+        )}
+
+        {status === 'importing' && (
+          <Wrapper justifyContent="center" style={{ marginTop: 22 }}>
+            <Loading size={25}></Loading>
+          </Wrapper>
+        )}
+      </ModalWrapper>
+    </Modal>
+  );
+};
+
+export default ImportModal;

packages/app/src/components/import/styles.ts

@@ -0,0 +1,30 @@
+import { styled } from '@/styles';
+
+export const StyledTitle = styled.div(({ theme }) => {
+  return {
+    fontSize: theme.font.h6,
+    fontWeight: 600,
+    textAlign: 'center',
+    marginTop: '45px',
+    color: theme.colors.popoverColor,
+  };
+});
+
+export const StyledButtonWrapper = styled.div(() => {
+  return {
+    width: '280px',
+    margin: '24px auto 0',
+    button: {
+      display: 'block',
+      width: '100%',
+      ':not(:last-child)': {
+        marginBottom: '16px',
+      },
+    },
+  };
+});
+
+export const StyledLoadingWrapper = styled.div(() => {
+  return {
+  }
+})

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

@@ -1,13 +1,19 @@
-import { StyledLoading, StyledLoadingItem } from './styled';
+import {
+  StyledLoadingWrapper,
+  StyledLoading,
+  StyledLoadingItem,
+} from './styled';
 
-export const Loading = () => {
+export const Loading = ({ size = 40 }: { size?: number }) => {
   return (
-    <StyledLoading>
-      <StyledLoadingItem />
-      <StyledLoadingItem />
-      <StyledLoadingItem />
-      <StyledLoadingItem />
-    </StyledLoading>
+    <StyledLoadingWrapper size={size}>
+      <StyledLoading>
+        <StyledLoadingItem size={size} />
+        <StyledLoadingItem size={size} />
+        <StyledLoadingItem size={size} />
+        <StyledLoadingItem size={size} />
+      </StyledLoading>
+    </StyledLoadingWrapper>
   );
 };
 

packages/app/src/components/loading/styled.ts

@@ -1,14 +1,19 @@
 import { styled } from '@/styles';
 
 // Inspired by https://codepen.io/graphilla/pen/rNvBMYY
-const loadingItemSize = '40px';
+export const StyledLoadingWrapper = styled.div<{ size?: number }>(
+  ({ size = 40 }) => {
+    return {
+      width: size * 4,
+      height: size * 4,
+      position: 'relative',
+    };
+  }
+);
 export const StyledLoading = styled.div`
-  position: relative;
-  left: 50%;
-  transform: rotateX(55deg) rotateZ(-45deg)
-    translate(calc(${loadingItemSize} * -2), 0);
-  margin-bottom: calc(3 * ${loadingItemSize});
-
+  position: absolute;
+  left: 25%;
+  top: 25%;
   @keyframes slide {
     0% {
       transform: translate(var(--sx), var(--sy));
@@ -21,24 +26,14 @@ export const StyledLoading = styled.div`
       transform: translate(var(--ex), var(--ey));
     }
   }
-  @keyframes load {
-    20% {
-      content: '.';
-    }
-    40% {
-      content: '..';
-    }
-    80%,
-    100% {
-      content: '...';
-    }
-  }
 `;
 
-export const StyledLoadingItem = styled.div`
+export const StyledLoadingItem = styled.div<{ size: number }>(
+  ({ size = 40 }) => {
+    return `
   position: absolute;
-  width: ${loadingItemSize};
-  height: ${loadingItemSize};
+  width: ${size}px;
+  height: ${size}px;
   background: #9dacf9;
   animation: slide 0.9s cubic-bezier(0.65, 0.53, 0.59, 0.93) infinite;
 
@@ -92,3 +87,5 @@ export const StyledLoadingItem = styled.div`
     --ey: -50%;
   }
 `;
+  }
+);

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

@@ -47,7 +47,7 @@ const FavoriteList = ({ showList }: { showList: boolean }) => {
   );
 };
 export const WorkSpaceSliderBar = () => {
-  const { triggerQuickSearchModal } = useModal();
+  const { triggerQuickSearchModal, triggerImportModal } = useModal();
   const [show, setShow] = useState(false);
   const [showSubFavorite, setShowSubFavorite] = useState(false);
   const { createPage } = useEditor();
@@ -58,7 +58,7 @@ export const WorkSpaceSliderBar = () => {
       <StyledSliderBar show={show}>
         <StyledListItem
           onClick={() => {
-            triggerQuickSearchModal(true);
+            triggerQuickSearchModal();
           }}
         >
           Quick search
@@ -102,7 +102,13 @@ export const WorkSpaceSliderBar = () => {
         </StyledListItem>
         <FavoriteList showList={showSubFavorite} />
 
-        <StyledListItem>Import</StyledListItem>
+        <StyledListItem
+          onClick={() => {
+            triggerImportModal();
+          }}
+        >
+          Import
+        </StyledListItem>
 
         <Link href={{ pathname: '/page-list/trash' }}>
           <StyledListItem active={router.pathname === '/page-list/trash'}>