51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
// app/components/Editor/EditorToolbar.tsx
|
|
'use client'
|
|
|
|
import { Space, Button, Tooltip } from 'antd'
|
|
import {
|
|
BoldOutlined,
|
|
ItalicOutlined,
|
|
OrderedListOutlined,
|
|
UnorderedListOutlined,
|
|
LinkOutlined,
|
|
SaveOutlined,
|
|
UserOutlined,
|
|
} from '@ant-design/icons'
|
|
|
|
interface EditorToolbarProps {
|
|
onSave?: () => void
|
|
onFormat?: (type: string) => void
|
|
}
|
|
|
|
export default function EditorToolbar({ onSave, onFormat }: EditorToolbarProps) {
|
|
return (
|
|
<div className="border-b p-2 bg-white">
|
|
<Space>
|
|
<Tooltip title="保存">
|
|
<Button icon={<SaveOutlined />} onClick={onSave} />
|
|
</Tooltip>
|
|
<div className="h-5 border-r border-gray-300" />
|
|
<Tooltip title="加粗">
|
|
<Button icon={<BoldOutlined />} onClick={() => onFormat?.('bold')} />
|
|
</Tooltip>
|
|
<Tooltip title="斜体">
|
|
<Button icon={<ItalicOutlined />} onClick={() => onFormat?.('italic')} />
|
|
</Tooltip>
|
|
<div className="h-5 border-r border-gray-300" />
|
|
<Tooltip title="有序列表">
|
|
<Button icon={<OrderedListOutlined />} onClick={() => onFormat?.('orderedList')} />
|
|
</Tooltip>
|
|
<Tooltip title="无序列表">
|
|
<Button icon={<UnorderedListOutlined />} onClick={() => onFormat?.('unorderedList')} />
|
|
</Tooltip>
|
|
<Tooltip title="链接">
|
|
<Button icon={<LinkOutlined />} onClick={() => onFormat?.('link')} />
|
|
</Tooltip>
|
|
<div className="h-5 border-r border-gray-300" />
|
|
<Tooltip title="协作者">
|
|
<Button icon={<UserOutlined />} />
|
|
</Tooltip>
|
|
</Space>
|
|
</div>
|
|
)
|
|
} |