feat: add block card component (#2398)

This commit is contained in:
Whitewater 2023-05-16 03:19:28 -07:00 committed by GitHub
parent 9ce3a96862
commit 017b9c8615
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 120 additions and 36 deletions

View File

@ -0,0 +1,25 @@
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;
} & HTMLAttributes<HTMLDivElement>
>(({ left, title, desc, right, ...props }, ref) => {
return (
<div ref={ref} className={styles.blockCard} {...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';

View File

@ -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)',
});

View File

@ -10,7 +10,7 @@ import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-
import type { FC } from 'react';
import { useCallback } from 'react';
import { WorkspaceAvatar } from '../workspace-avatar';
import { WorkspaceAvatar } from '../../workspace-avatar';
import {
StyledCard,
StyledSettingLink,

View File

@ -1,5 +1,5 @@
import { displayFlex, styled, textEllipsis } from '../..';
import { IconButton } from '../..';
import { displayFlex, styled, textEllipsis } from '../../../styles';
import { IconButton } from '../../../ui/button/icon-button';
export const StyleWorkspaceInfo = styled('div')(() => {
return {

View File

@ -9,7 +9,7 @@ import type { FC } from 'react';
import { useRef } from 'react';
import { useCallback, useState } from 'react';
import { Menu } from '../..';
import { Menu } from '../../ui/menu/menu';
import { Export } from './export';
import { containerStyle, indicatorContainerStyle, tabStyle } from './index.css';
import { SharePage } from './share-page';

View File

@ -12,7 +12,7 @@ import {
import { SortableContext, useSortable } from '@dnd-kit/sortable';
import type { FC } from 'react';
import { WorkspaceCard } from '../workspace-card';
import { WorkspaceCard } from '../../components/card/workspace-card';
import { workspaceItemStyle } from './index.css';
export type WorkspaceListProps = {

View File

@ -0,0 +1,55 @@
import { BlockCard } from '@affine/component/card/block-card';
import { WorkspaceFlavour } from '@affine/workspace/type';
import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
import { Workspace } from '@blocksuite/store';
import { WorkspaceCard } from '../components/card/workspace-card';
import { toast } from '../ui/toast';
export default {
title: 'AFFiNE/Card',
component: WorkspaceCard,
};
const blockSuiteWorkspace = new Workspace({
id: 'blocksuite-local',
});
blockSuiteWorkspace.meta.setName('Hello World');
export const AffineWorkspaceCard = () => {
return (
<WorkspaceCard
workspace={{
flavour: WorkspaceFlavour.LOCAL,
id: 'local',
blockSuiteWorkspace,
providers: [],
}}
onClick={() => {}}
onSettingClick={() => {}}
currentWorkspaceId={null}
/>
);
};
export const AffineBlockCard = () => {
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
<BlockCard title={'New Page'} onClick={() => toast('clicked')} />
<BlockCard
title={'New Page'}
desc={'Write with a blank page'}
right={<PageIcon width={20} height={20} />}
onClick={() => toast('clicked page')}
/>
<BlockCard
title={'New Edgeless'}
desc={'Draw with a blank whiteboard'}
left={<PageIcon width={20} height={20} />}
right={<EdgelessIcon width={20} height={20} />}
onClick={() => toast('clicked edgeless')}
/>
</div>
);
};

View File

@ -1,31 +0,0 @@
import { WorkspaceFlavour } from '@affine/workspace/type';
import { Workspace } from '@blocksuite/store';
import { WorkspaceCard } from '../components/workspace-card';
export default {
title: 'AFFiNE/WorkspaceCard',
component: WorkspaceCard,
};
const blockSuiteWorkspace = new Workspace({
id: 'blocksuite-local',
});
blockSuiteWorkspace.meta.setName('Hello World');
export const Basic = () => {
return (
<WorkspaceCard
workspace={{
flavour: WorkspaceFlavour.LOCAL,
id: 'local',
blockSuiteWorkspace,
providers: [],
}}
onClick={() => {}}
onSettingClick={() => {}}
currentWorkspaceId={null}
/>
);
};