feat: add block card component (#2398)

packages/component/src/components/card/workspace-card/styles.ts

@@ -0,0 +1,97 @@
+import { displayFlex, styled, textEllipsis } from '../../../styles';
+import { IconButton } from '../../../ui/button/icon-button';
+
+export const StyleWorkspaceInfo = styled('div')(() => {
+  return {
+    marginLeft: '15px',
+    width: '202px',
+    p: {
+      height: '20px',
+      fontSize: 'var(--affine-font-sm)',
+      ...displayFlex('flex-start', 'center'),
+    },
+    svg: {
+      marginRight: '10px',
+      fontSize: '16px',
+      flexShrink: 0,
+    },
+    span: {
+      flexGrow: 1,
+      ...textEllipsis(1),
+    },
+  };
+});
+
+export const StyleWorkspaceTitle = styled('div')(() => {
+  return {
+    fontSize: 'var(--affine-font-base)',
+    fontWeight: 600,
+    lineHeight: '24px',
+    marginBottom: '10px',
+    maxWidth: '200px',
+    ...textEllipsis(1),
+  };
+});
+
+export const StyledCard = styled('div')<{
+  active?: boolean;
+}>(({ active }) => {
+  const borderColor = active ? 'var(--affine-primary-color)' : 'transparent';
+  return {
+    width: '310px',
+    height: '124px',
+    cursor: 'pointer',
+    padding: '16px',
+    boxShadow: 'var(--affine-shadow-1)',
+    borderRadius: '12px',
+    border: `1px solid ${borderColor}`,
+    ...displayFlex('flex-start', 'flex-start'),
+    marginBottom: '24px',
+    transition: 'background .2s',
+    background: 'var(--affine-white-80)',
+    position: 'relative',
+    ':hover': {
+      background: 'var(--affine-hover-color)',
+      '.add-icon': {
+        borderColor: 'var(--affine-primary-color)',
+        color: 'var(--affine-primary-color)',
+      },
+      '.setting-entry': {
+        opacity: 1,
+        pointerEvents: 'auto',
+      },
+    },
+    '@media (max-width: 720px)': {
+      width: '100%',
+    },
+  };
+});
+
+export const StyledModalHeader = styled('div')(() => {
+  return {
+    width: '100%',
+    height: '72px',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    borderRadius: '24px 24px 0 0',
+    padding: '0 40px',
+    ...displayFlex('space-between', 'center'),
+  };
+});
+
+export const StyledSettingLink = styled(IconButton)(() => {
+  return {
+    position: 'absolute',
+    right: '6px',
+    bottom: '6px',
+    opacity: 0,
+    borderRadius: '4px',
+    color: 'var(--affine-primary-color)',
+    pointerEvents: 'none',
+    transition: 'all .15s',
+    ':hover': {
+      background: 'var(--affine-hover-color)',
+    },
+  };
+});