feat(web): unify vehicle workspace identity
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { Tag, Typography } from '@douyinfe/semi-ui';
|
||||
import { Avatar, Tag, Typography } from '@douyinfe/semi-ui';
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
const { Text, Title } = Typography;
|
||||
@@ -6,6 +6,8 @@ const { Text, Title } = Typography;
|
||||
export function WorkspaceCommandBar({
|
||||
title,
|
||||
description,
|
||||
eyebrow,
|
||||
icon,
|
||||
status,
|
||||
statusColor = 'blue',
|
||||
meta,
|
||||
@@ -15,6 +17,8 @@ export function WorkspaceCommandBar({
|
||||
}: {
|
||||
title: ReactNode;
|
||||
description: ReactNode;
|
||||
eyebrow?: ReactNode;
|
||||
icon?: ReactNode;
|
||||
status?: string;
|
||||
statusColor?: React.ComponentProps<typeof Tag>['color'];
|
||||
meta?: ReactNode;
|
||||
@@ -22,13 +26,23 @@ export function WorkspaceCommandBar({
|
||||
className?: string;
|
||||
ariaLabel?: string;
|
||||
}) {
|
||||
const rootClassName = ['v2-workspace-command-bar', className].filter(Boolean).join(' ');
|
||||
const hasIdentity = eyebrow != null || icon != null;
|
||||
const rootClassName = ['v2-workspace-command-bar', hasIdentity ? 'has-identity' : '', 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>
|
||||
{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}
|
||||
|
||||
Reference in New Issue
Block a user