@@ -1,49 +0,0 @@
|
||||
import React from "react"
|
||||
import { SearchOutlined } from "@ant-design/icons"
|
||||
import type { EditTemplateType } from "../../types/templateLibrary"
|
||||
import { TEMPLATE_TYPES } from "../../constants/templateLibrary"
|
||||
|
||||
interface TemplateToolbarProps {
|
||||
searchText: string
|
||||
onSearchChange: (e: React.ChangeEvent<HTMLInputElement>) => void
|
||||
activeType: EditTemplateType | "全部"
|
||||
onTypeChange: (type: EditTemplateType | "全部") => void
|
||||
}
|
||||
|
||||
export const TemplateToolbar: React.FC<TemplateToolbarProps> = ({
|
||||
searchText,
|
||||
onSearchChange,
|
||||
activeType,
|
||||
onTypeChange,
|
||||
}) => {
|
||||
return (
|
||||
<div className="xx-templates-toolbar">
|
||||
<div className="xx-templates-search">
|
||||
<span className="xx-templates-search-icon">
|
||||
<SearchOutlined />
|
||||
</span>
|
||||
<input
|
||||
className="xx-templates-search-input"
|
||||
type="text"
|
||||
placeholder="搜索模板名称、描述或标签..."
|
||||
value={searchText}
|
||||
onChange={onSearchChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="xx-templates-categories">
|
||||
{TEMPLATE_TYPES.map((cat) => (
|
||||
<button
|
||||
key={cat.type}
|
||||
className={`xx-templates-cat-btn${activeType === cat.type ? " active" : ""}`}
|
||||
onClick={() => onTypeChange(cat.type)}
|
||||
>
|
||||
<span className="xx-templates-cat-icon">{cat.icon}</span>
|
||||
{cat.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TemplateToolbar
|
||||
Reference in New Issue
Block a user