refactor(infra): directory structure (#4615)

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

@@ -0,0 +1,33 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+
+import * as styles from './styles.css';
+
+export const BlockCard = forwardRef<
+  HTMLDivElement,
+  {
+    left?: ReactNode;
+    title: string;
+    desc?: string;
+    right?: ReactNode;
+    disabled?: boolean;
+  } & HTMLAttributes<HTMLDivElement>
+>(({ left, title, desc, right, disabled, onClick, ...props }, ref) => {
+  return (
+    <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>
+        <div className={styles.blockCardDesc}>{desc}</div>
+      </div>
+      {right && <div className={styles.blockCardAround}>{right}</div>}
+    </div>
+  );
+});
+BlockCard.displayName = 'BlockCard';

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

@@ -0,0 +1,44 @@
+import { style } from '@vanilla-extract/css';
+
+export const blockCard = style({
+  display: 'flex',
+  gap: '12px',
+  padding: '8px 12px',
+  color: 'var(--affine-text-primary-color)',
+  backgroundColor: 'var(--affine-white-80)',
+  borderRadius: '8px',
+  userSelect: 'none',
+  cursor: 'pointer',
+  textAlign: 'start',
+  boxShadow: 'var(--affine-shadow-1)',
+  selectors: {
+    '&:hover': {
+      backgroundColor: 'var(--affine-hover-color)',
+    },
+    '&[aria-disabled]': {
+      color: 'var(--affine-text-disable-color)',
+    },
+    '&[aria-disabled]:hover': {
+      backgroundColor: 'var(--affine-white-80)',
+      cursor: 'not-allowed',
+    },
+    // TODO active styles
+  },
+});
+
+export const blockCardAround = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const blockCardContent = style({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+});
+
+export const blockCardDesc = style({
+  color: 'var(--affine-text-secondary-color)',
+  fontSize: 'var(--affine-font-xs)',
+});