64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
import { Avatar, Tag, Typography } from '@douyinfe/semi-ui';
|
|
import type { ReactNode } from 'react';
|
|
|
|
const { Text, Title } = Typography;
|
|
|
|
export type WorkspaceCommandTone = 'primary' | 'warning' | 'authority' | 'health';
|
|
|
|
export function WorkspaceCommandBar({
|
|
title,
|
|
description,
|
|
eyebrow,
|
|
icon,
|
|
tone = 'primary',
|
|
status,
|
|
statusColor = 'blue',
|
|
meta,
|
|
actions,
|
|
className = '',
|
|
ariaLabel
|
|
}: {
|
|
title: ReactNode;
|
|
description: ReactNode;
|
|
eyebrow?: ReactNode;
|
|
icon?: ReactNode;
|
|
tone?: WorkspaceCommandTone;
|
|
status?: string;
|
|
statusColor?: React.ComponentProps<typeof Tag>['color'];
|
|
meta?: ReactNode;
|
|
actions?: ReactNode;
|
|
className?: string;
|
|
ariaLabel?: string;
|
|
}) {
|
|
const hasIdentity = eyebrow != null || icon != null;
|
|
const rootClassName = [
|
|
'v2-workspace-command-bar',
|
|
hasIdentity ? 'has-identity' : '',
|
|
hasIdentity ? `is-${tone}` : '',
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
return (
|
|
<header className={rootClassName} aria-label={ariaLabel}>
|
|
<div className="v2-workspace-command-copy">
|
|
{hasIdentity ? <>
|
|
<Avatar className="v2-workspace-command-icon" color="blue" size="small">{icon}</Avatar>
|
|
<span className="v2-workspace-command-stack">
|
|
{eyebrow ? <Text className="v2-workspace-command-eyebrow" type="tertiary">{eyebrow}</Text> : null}
|
|
<Title className="v2-workspace-command-title" heading={5}>{title}</Title>
|
|
<Text className="v2-workspace-command-description" type="tertiary">{description}</Text>
|
|
</span>
|
|
</> : <>
|
|
<Title className="v2-workspace-command-title" heading={5}>{title}</Title>
|
|
<Text className="v2-workspace-command-description" 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>
|
|
);
|
|
}
|