feat: new import page component (#3277)

packages/component/src/components/import-page/index.css.ts

@@ -0,0 +1,43 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const importPageContainerStyle = style({
+  position: 'relative',
+  display: 'flex',
+  width: '480px',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: '16px',
+  boxShadow: 'var(--affine-shadow-1)',
+});
+
+export const importPageBodyStyle = style({
+  display: 'flex',
+  padding: '32px 40px 20px 40px',
+  flexDirection: 'column',
+  gap: '20px',
+  alignSelf: 'stretch',
+});
+
+export const importPageButtonContainerStyle = style({
+  display: 'grid',
+  gridTemplateColumns: '1fr 1fr',
+  padding: '0px 40px 36px',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '20px',
+  alignSelf: 'stretch',
+});
+
+globalStyle(`${importPageBodyStyle} .title`, {
+  fontSize: 'var(--affine-font-h-6)',
+  fontWeight: 600,
+});
+
+globalStyle(`${importPageBodyStyle} a`, {
+  whiteSpace: 'nowrap',
+  wordBreak: 'break-word',
+  color: 'var(--affine-link-color)',
+  textDecoration: 'none',
+  cursor: 'pointer',
+});

packages/component/src/components/import-page/index.tsx

@@ -0,0 +1,76 @@
+import {
+  ExportToHtmlIcon,
+  ExportToMarkdownIcon,
+  HelpIcon,
+  NewIcon,
+  NotionIcon,
+} from '@blocksuite/icons';
+
+import { ModalCloseButton } from '../../ui/modal';
+import { Tooltip } from '../../ui/tooltip';
+import { BlockCard } from '../card/block-card';
+import {
+  importPageBodyStyle,
+  importPageButtonContainerStyle,
+  importPageContainerStyle,
+} from './index.css';
+
+export const ImportPage = ({
+  importMarkdown,
+  importHtml,
+  importNotion,
+  onClose,
+}: {
+  importMarkdown: () => void;
+  importHtml: () => void;
+  importNotion: () => void;
+  onClose: () => void;
+}) => (
+  <div className={importPageContainerStyle}>
+    <ModalCloseButton top={6} right={6} onClick={onClose} />
+    <div className={importPageBodyStyle}>
+      <div className="title">Import</div>
+      <span>
+        AFFiNE will gradually support more and more file types for import.&nbsp;
+        <a
+          href="https://community.affine.pro/c/feature-requests/import-export"
+          target="_blank"
+          rel="noreferrer"
+        >
+          Provide feedback.
+        </a>
+      </span>
+    </div>
+    <div className={importPageButtonContainerStyle}>
+      <BlockCard
+        left={<ExportToMarkdownIcon width={20} height={20} />}
+        title="Markdown"
+        onClick={importMarkdown}
+      />
+      <BlockCard
+        left={<ExportToHtmlIcon width={20} height={20} />}
+        title="HTML"
+        onClick={importHtml}
+      />
+      <BlockCard
+        left={<NotionIcon width={20} height={20} />}
+        title="Notion"
+        right={
+          <Tooltip
+            content={'Learn how to Import your Notion pages into AFFiNE.'}
+            placement="top-start"
+          >
+            <HelpIcon width={20} height={20} />
+          </Tooltip>
+        }
+        onClick={importNotion}
+      />
+      <BlockCard
+        left={<NewIcon width={20} height={20} />}
+        title="Coming soon..."
+        disabled
+        onClick={importHtml}
+      />
+    </div>
+  </div>
+);