feat: new import page component (#3277)

packages/component/src/components/card/block-card/index.tsx

@@ -9,10 +9,18 @@ export const BlockCard = forwardRef<
     title: string;
     desc?: string;
     right?: ReactNode;
+    disabled?: boolean;
   } & HTMLAttributes<HTMLDivElement>
->(({ left, title, desc, right, ...props }, ref) => {
+>(({ left, title, desc, right, disabled, onClick, ...props }, ref) => {
   return (
-    <div ref={ref} className={styles.blockCard} {...props}>
+    <div
+      ref={ref}
+      className={styles.blockCard}
+      role="button"
+      aria-disabled={disabled}
+      onClick={disabled ? undefined : onClick}
+      {...props}
+    >
       {left && <div className={styles.blockCardAround}>{left}</div>}
       <div className={styles.blockCardContent}>
         <div>{title}</div>

packages/component/src/components/card/block-card/styles.css.ts

@@ -14,6 +14,13 @@ export const blockCard = style({
     '&:hover': {
       boxShadow: 'var(--affine-shadow-1)',
     },
+    '&[aria-disabled]': {
+      color: 'var(--affine-text-disable-color)',
+    },
+    '&[aria-disabled]:hover': {
+      cursor: 'not-allowed',
+      boxShadow: 'none',
+    },
     // TODO active styles
   },
 });