47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
import type { ReactElement } from 'react'
|
|
import { Eye, Pencil, Sparkles } from 'lucide-react'
|
|
|
|
/**
|
|
* 块右上角的一排图标按钮（普通块、属性表、库规则的卡片共用）：只放图标，名字写在悬停提示（title）和读屏用的 aria-label 里。
|
|
* 「问 AI」：点开 / 收起块下面的问答区，展开时带按下的底色。
|
|
* 「编辑 / 预览」切换：预览时是铅笔「编辑」，编辑时是眼睛「预览」、带按下的底色。
|
|
*/
|
|
export function BlockTools({ editing, onToggleEdit, asking, onToggleAsk }: {
|
|
editing: boolean
|
|
onToggleEdit: () => void
|
|
/** 块下面的问答区展开着 */
|
|
asking?: boolean
|
|
/** 没给就不显示「问 AI」（文件不在工作区文件夹里，问答没地方存） */
|
|
onToggleAsk?: () => void
|
|
}): ReactElement {
|
|
const label = editing ? '预览' : '编辑'
|
|
const Icon = editing ? Eye : Pencil
|
|
return (
|
|
<div className="flex h-5 shrink-0 items-center gap-0.5" role="group" aria-label="块操作">
|
|
{onToggleAsk && (
|
|
<button
|
|
type="button"
|
|
className="cr-tool flex h-5 w-6 items-center justify-center rounded"
|
|
data-active={asking ? '' : undefined}
|
|
title="问 AI"
|
|
aria-label="问 AI"
|
|
aria-expanded={asking === true}
|
|
onClick={onToggleAsk}
|
|
>
|
|
<Sparkles size={14} strokeWidth={1.8} aria-hidden />
|
|
</button>
|
|
)}
|
|
<button
|
|
type="button"
|
|
className="cr-tool flex h-5 w-6 items-center justify-center rounded"
|
|
data-active={editing ? '' : undefined}
|
|
title={label}
|
|
aria-label={label}
|
|
onClick={onToggleEdit}
|
|
>
|
|
<Icon size={14} strokeWidth={1.8} aria-hidden />
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|