feat: add import modal

2026-07-18 18:46:19 +08:00 · 2022-12-09 22:00:16 +08:00
parent 9ba50ee1c4
commit 0abd68d721
9 changed files with 188 additions and 116 deletions
@@ -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;
@@ -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 {
+  }
+})