feat: add block card component (#2398)

2026-07-29 08:09:52 +08:00 · 2023-05-16 03:19:28 -07:00
parent 2efafe5420
commit 341b18ded7
8 changed files with 120 additions and 36 deletions
@@ -0,0 +1,35 @@
+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-background-primary-color)',
+  borderRadius: '4px',
+  userSelect: 'none',
+  cursor: 'pointer',
+  selectors: {
+    '&:hover': {
+      boxShadow: 'var(--affine-shadow-1)',
+    },
+    // 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)',
+});