52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import { Typography } from '@douyinfe/semi-ui';
|
|
import type { ReactNode } from 'react';
|
|
|
|
const { Text, Title } = Typography;
|
|
|
|
export type WorkspacePanelTone = 'neutral' | 'primary' | 'warning' | 'authority' | 'health' | 'danger';
|
|
|
|
export function WorkspacePanelHeader({
|
|
title,
|
|
description,
|
|
eyebrow,
|
|
meta,
|
|
actions,
|
|
variant = 'default',
|
|
tone = 'neutral',
|
|
className = '',
|
|
actionsClassName = ''
|
|
}: {
|
|
title: ReactNode;
|
|
description?: ReactNode;
|
|
eyebrow?: ReactNode;
|
|
meta?: ReactNode;
|
|
actions?: ReactNode;
|
|
variant?: 'default' | 'compact' | 'inverted';
|
|
tone?: WorkspacePanelTone;
|
|
className?: string;
|
|
actionsClassName?: string;
|
|
}) {
|
|
const headerClassName = [
|
|
'v2-workspace-panel-header',
|
|
`is-${variant}`,
|
|
`tone-${tone}`,
|
|
eyebrow != null ? 'has-eyebrow' : '',
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
const trailingClassName = ['v2-workspace-panel-actions', actionsClassName].filter(Boolean).join(' ');
|
|
|
|
return (
|
|
<header className={headerClassName}>
|
|
<div className="v2-workspace-panel-copy">
|
|
{eyebrow != null ? <Text className="v2-workspace-panel-eyebrow">{eyebrow}</Text> : null}
|
|
<Title className="v2-workspace-panel-title" heading={5}>{title}</Title>
|
|
{description ? <Text className="v2-workspace-panel-description" type="tertiary">{description}</Text> : null}
|
|
</div>
|
|
{meta || actions ? <div className={trailingClassName}>
|
|
{meta ? <span className="v2-workspace-panel-meta">{meta}</span> : null}
|
|
{actions}
|
|
</div> : null}
|
|
</header>
|
|
);
|
|
}
|