工具条 Toolbar

<div class="xxd-toolbar" role="toolbar" aria-label="格式" data-framed>
  <button class="xxd-toolbar__item" aria-label="加粗" aria-pressed="true" data-tooltip="加粗 ⌘B"><i data-xxd-icon="Bold" data-size="16"></i></button>
  <button class="xxd-toolbar__item" aria-label="斜体" data-tooltip="斜体 ⌘I"><i data-xxd-icon="Italic" data-size="16"></i></button>
  <button class="xxd-toolbar__item" aria-label="标题" data-tooltip="标题"><i data-xxd-icon="Heading1" data-size="16"></i></button>
  <span class="xxd-toolbar__sep"></span>
  <button class="xxd-toolbar__item" aria-label="链接" data-tooltip="链接 ⌘K"><i data-xxd-icon="Link" data-size="16"></i></button>
  <button class="xxd-toolbar__item" aria-label="图片" data-tooltip="图片"><i data-xxd-icon="Image" data-size="16"></i></button>
  <span class="xxd-toolbar__spacer"></span>
  <button class="xxd-toolbar__item"><i data-xxd-icon="Eye" data-size="14"></i>预览</button>
</div>

export function ToolbarDemo() {
  return (
    <Toolbar className="w-full max-w-md">
      <Toolbar.Button icon={<Icon name="Bold" />} aria-label="加粗" />
      <Toolbar.Button icon={<Icon name="Italic" />} aria-label="斜体" />
      <Toolbar.Button icon={<Icon name="Link" />} aria-label="链接" />
      <Toolbar.Button icon={<Icon name="Image" />} aria-label="图片" />
    </Toolbar>
  );
}