unify Semi UI workspace command hierarchy
This commit is contained in:
@@ -0,0 +1,40 @@
|
||||
import { Tag, Typography } from '@douyinfe/semi-ui';
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
const { Text, Title } = Typography;
|
||||
|
||||
export function WorkspaceCommandBar({
|
||||
title,
|
||||
description,
|
||||
status,
|
||||
statusColor = 'blue',
|
||||
meta,
|
||||
actions,
|
||||
className = '',
|
||||
ariaLabel
|
||||
}: {
|
||||
title: ReactNode;
|
||||
description: ReactNode;
|
||||
status?: string;
|
||||
statusColor?: React.ComponentProps<typeof Tag>['color'];
|
||||
meta?: ReactNode;
|
||||
actions?: ReactNode;
|
||||
className?: string;
|
||||
ariaLabel?: string;
|
||||
}) {
|
||||
const rootClassName = ['v2-workspace-command-bar', className].filter(Boolean).join(' ');
|
||||
|
||||
return (
|
||||
<header className={rootClassName} aria-label={ariaLabel}>
|
||||
<div className="v2-workspace-command-copy">
|
||||
<Title heading={5}>{title}</Title>
|
||||
<Text type="tertiary">{description}</Text>
|
||||
</div>
|
||||
{status || meta || actions ? <div className="v2-workspace-command-actions">
|
||||
{status ? <Tag color={statusColor} type="light" size="small">{status}</Tag> : null}
|
||||
{meta ? <span className="v2-workspace-command-meta">{meta}</span> : null}
|
||||
{actions}
|
||||
</div> : null}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user